ColorField

Color input field with labels, descriptions, and validation built on React Aria ColorField

Usage

1import { ColorField, parseColor } from '@lenso/ui';

1"use client";2
3import { ColorField, ColorSwatch, parseColor } from "@lenso/ui";4import { useState } from "react";5import * as stylex from "@stylexjs/stylex";6
7const styles = stylex.create({ field: { width: 280, maxWidth: "100%" } });8export function Basic() {9  const [color, setColor] = useState<ReturnType<typeof parseColor> | null>(() =>10    parseColor("#0485F7"),11  );12  return (13    <ColorField xstyle={styles.field} name="color" value={color} onChange={setColor}>14      <ColorField.Label>Color</ColorField.Label>15      <ColorField.Group>16        <ColorField.Prefix>17          <ColorSwatch {...(color ? { color } : {})} size="xs" />18        </ColorField.Prefix>19        <ColorField.Input />20      </ColorField.Group>21    </ColorField>22  );23}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Anatomy

1import {ColorField, Label, ColorSwatch, Description, FieldError, parseColor} from '@lenso/ui';2
3export default () => (4  <ColorField>5    <Label />6    <ColorField.Group>7      <ColorField.Prefix>8        <ColorSwatch color="#000000" />9      </ColorField.Prefix>10      <ColorField.Input />11    </ColorField.Group>12    <Description />13    <FieldError />14  </ColorField>15)

ColorField combines label, color input, description, and error into a single accessible component.

Examples

Variants

The ColorField.Group component supports two visual variants:

primary (default) - Standard styling with shadow, suitable for most use cases
secondary - Lower emphasis variant without shadow, suitable for use in Surface components

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { ColorField } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { styles } from "../color-picker/source.stylex";6export function Variants() {7  return (8    <div {...stylex.props(styles.column)}>9      <ColorField xstyle={styles.width280} defaultValue="#0485F7" name="primary-color">10        <ColorField.Label>Primary variant</ColorField.Label>11        <ColorField.Group variant="primary">12          <ColorField.Input />13        </ColorField.Group>14      </ColorField>15      <ColorField xstyle={styles.width280} defaultValue="#F43F5E" name="secondary-color">16        <ColorField.Label>Secondary variant</ColorField.Label>17        <ColorField.Group variant="secondary">18          <ColorField.Input />19        </ColorField.Group>20      </ColorField>21    </div>22  );23}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

On Surface

When used inside a Surface component, use variant="secondary" on ColorField.Group to apply the lower emphasis variant suitable for surface backgrounds.

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { ColorField, Surface } from "@lenso/ui";4import { styles } from "../color-picker/source.stylex";5export function OnSurface() {6  return (7    <Surface xstyle={[styles.width320, styles.padded]}>8      <ColorField defaultValue="#3B82F6" name="color">9        <ColorField.Label>Theme Color</ColorField.Label>10        <ColorField.Group variant="secondary">11          <ColorField.Input />12        </ColorField.Group>13        <ColorField.Description>Select your theme color</ColorField.Description>14      </ColorField>15    </Surface>16  );17}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

With Description

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { ColorField } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { styles } from "../color-picker/source.stylex";6export function WithDescription() {7  return (8    <div {...stylex.props(styles.column)}>9      <ColorField xstyle={styles.width280} defaultValue="#3B82F6" name="color">10        <ColorField.Label>Primary Color</ColorField.Label>11        <ColorField.Group>12          <ColorField.Input />13        </ColorField.Group>14        <ColorField.Description>Enter your brand's primary color</ColorField.Description>15      </ColorField>16      <ColorField xstyle={styles.width280} defaultValue="#F59E0B" name="accent-color">17        <ColorField.Label>Accent Color</ColorField.Label>18        <ColorField.Group>19          <ColorField.Input />20        </ColorField.Group>21        <ColorField.Description>Used for highlights and CTAs</ColorField.Description>22      </ColorField>23    </div>24  );25}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Required Field

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { ColorField } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { styles } from "../color-picker/source.stylex";6export function Required() {7  return (8    <div {...stylex.props(styles.column)}>9      <ColorField isRequired xstyle={styles.width280} name="color">10        <ColorField.Label>Brand Color</ColorField.Label>11        <ColorField.Group>12          <ColorField.Input placeholder="#000000" />13        </ColorField.Group>14      </ColorField>15      <ColorField isRequired xstyle={styles.width280} name="theme-color">16        <ColorField.Label>Theme Color</ColorField.Label>17        <ColorField.Group>18          <ColorField.Input placeholder="#000000" />19        </ColorField.Group>20        <ColorField.Description>Required field</ColorField.Description>21      </ColorField>22    </div>23  );24}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Disabled State

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { ColorField } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { styles } from "../color-picker/source.stylex";6export function Disabled() {7  return (8    <div {...stylex.props(styles.column)}>9      <ColorField isDisabled xstyle={styles.width280} defaultValue="#0485F7" name="color">10        <ColorField.Label>Color</ColorField.Label>11        <ColorField.Group>12          <ColorField.Input />13        </ColorField.Group>14        <ColorField.Description>This color field is disabled</ColorField.Description>15      </ColorField>16      <ColorField isDisabled xstyle={styles.width280} name="color-empty">17        <ColorField.Label>Color</ColorField.Label>18        <ColorField.Group>19          <ColorField.Input placeholder="#000000" />20        </ColorField.Group>21        <ColorField.Description>This color field is disabled</ColorField.Description>22      </ColorField>23    </div>24  );25}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Full Width

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { ColorField } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { styles } from "../color-picker/source.stylex";6export function FullWidth() {7  return (8    <div {...stylex.props(styles.width400, styles.column)}>9      <ColorField fullWidth defaultValue="#10B981" name="color">10        <ColorField.Label>Brand Color</ColorField.Label>11        <ColorField.Group>12          <ColorField.Input />13        </ColorField.Group>14      </ColorField>15      <ColorField fullWidth defaultValue="#8B5CF6" name="color-with-suffix">16        <ColorField.Label>Theme Color</ColorField.Label>17        <ColorField.Group>18          <ColorField.Input />19        </ColorField.Group>20      </ColorField>21    </div>22  );23}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Validation

Use isInvalid together with FieldError to surface validation messages.

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { ColorField } from "@lenso/ui";4import { useState } from "react";5import * as stylex from "@stylexjs/stylex";6import { styles } from "../color-picker/source.stylex";7export function Invalid() {8  // A Color cannot represent malformed text; keep the source's invalid edit in the input.9  const [invalidText, setInvalidText] = useState("not-a-color");10  return (11    <div {...stylex.props(styles.column)}>12      <ColorField isInvalid isRequired xstyle={styles.width280} name="color">13        <ColorField.Label>Color</ColorField.Label>14        <ColorField.Group>15          <ColorField.Input placeholder="#000000" />16        </ColorField.Group>17        <ColorField.Error>Please enter a valid hex color</ColorField.Error>18      </ColorField>19      <ColorField isInvalid xstyle={styles.width280} name="invalid-color">20        <ColorField.Label>Background Color</ColorField.Label>21        <ColorField.Group>22          <ColorField.Input23            value={invalidText}24            onChange={(event) => setInvalidText(event.target.value)}25          />26        </ColorField.Group>27        <ColorField.Error>Invalid color format. Use hex (e.g., #FF5733)</ColorField.Error>28      </ColorField>29    </div>30  );31}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Channel Editing

ColorField supports editing individual color channels (hue, saturation, lightness, red, green, blue, alpha) by setting the colorSpace and channel props.

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { ColorField, ColorSwatch, parseColor } from "@lenso/ui";4import type { Color } from "@lenso/ui";5import { useState } from "react";6import * as stylex from "@stylexjs/stylex";7import { styles } from "../color-picker/source.stylex";8export function ChannelEditing() {9  const [color, setColor] = useState<Color | null>(parseColor("#7F007F"));10  return (11    <div {...stylex.props(styles.column)}>12      <p {...stylex.props(styles.muted)}>Edit individual HSL channels:</p>13      <div {...stylex.props(styles.controls)}>14        {(["hue", "saturation", "lightness"] as const).map((channel) => (15          <ColorField16            key={channel}17            channel={channel}18            xstyle={styles.width100}19            colorSpace="hsl"20            name={channel}21            value={color}22            onChange={setColor}23          >24            <ColorField.Label xstyle={styles.capitalize}>{channel}</ColorField.Label>25            <ColorField.Group>26              <ColorField.Input />27              {channel !== "hue" && (28                <ColorField.Suffix>29                  <span {...stylex.props(styles.muted)}>%</span>30                </ColorField.Suffix>31              )}32            </ColorField.Group>33          </ColorField>34        ))}35      </div>36      <div {...stylex.props(styles.row2)}>37        <ColorSwatch color={color ?? undefined} size="md" />38        <span {...stylex.props(styles.small)}>39          Current: {color ? color.toString("hex") : "(empty)"}40        </span>41      </div>42    </div>43  );44}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Controlled

Control the value to synchronize with other components or state management.

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { Button, ColorField, ColorSwatch, parseColor } from "@lenso/ui";4import type { Color } from "@lenso/ui";5import { useState } from "react";6import * as stylex from "@stylexjs/stylex";7import { styles } from "../color-picker/source.stylex";8export function Controlled() {9  const [value, setValue] = useState<Color | null>(parseColor("#0485F7"));10  return (11    <div {...stylex.props(styles.column)}>12      <ColorField xstyle={styles.width280} name="color" value={value} onChange={setValue}>13        <ColorField.Label>Color</ColorField.Label>14        <ColorField.Group>15          <ColorField.Prefix>16            <ColorSwatch color={value ?? undefined} size="xs" />17          </ColorField.Prefix>18          <ColorField.Input />19        </ColorField.Group>20        <ColorField.Description>21          Current value: {value ? value.toString("hex") : "(empty)"}22        </ColorField.Description>23      </ColorField>24      <div {...stylex.props(styles.row2)}>25        <Button variant="tertiary" onClick={() => setValue(parseColor("#EF4444"))}>26          Set Red27        </Button>28        <Button variant="tertiary" onClick={() => setValue(parseColor("#10B981"))}>29          Set Green30        </Button>31        <Button variant="tertiary" onClick={() => setValue(null)}>32          Clear33        </Button>34      </div>35    </div>36  );37}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Form Example

Complete form example with validation and submission handling.

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. Native form and Base UI button retain the source submit workflow. */3import { Button, ColorField, ColorSwatch } from "@lenso/ui";4import type { Color } from "@lenso/ui";5import { useState, type FormEvent } from "react";6import * as stylex from "@stylexjs/stylex";7import { styles } from "../color-picker/source.stylex";8export function FormExample() {9  const [value, setValue] = useState<Color | null>(null);10  const [isSubmitting, setIsSubmitting] = useState(false);11  function handleSubmit(event: FormEvent<HTMLFormElement>) {12    event.preventDefault();13    if (!value || isSubmitting) return;14    setIsSubmitting(true);15    setTimeout(() => {16      setValue(null);17      setIsSubmitting(false);18    }, 1500);19  }20  return (21    <form {...stylex.props(styles.column, styles.width280)} onSubmit={handleSubmit}>22      <ColorField23        fullWidth24        isRequired25        xstyle={styles.full}26        name="brand-color"27        value={value}28        onChange={setValue}29      >30        <ColorField.Label>Brand Color</ColorField.Label>31        <ColorField.Group>32          <ColorField.Prefix>33            <ColorSwatch color={value ?? undefined} size="xs" />34          </ColorField.Prefix>35          <ColorField.Input placeholder="#000000" />36        </ColorField.Group>37        <ColorField.Description>Choose your brand's primary color</ColorField.Description>38      </ColorField>39      <Button40        xstyle={styles.full}41        disabled={!value}42        isLoading={isSubmitting}43        type="submit"44        variant="primary"45      >46        {isSubmitting ? "Saving..." : "Save Color"}47      </Button>48    </form>49  );50}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Render Function

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. Native RAC render state replaces DOM render interception. */3import { ColorField, ColorSwatch, parseColor } from "@lenso/ui";4import type { Color } from "@lenso/ui";5import { useState } from "react";6import { styles } from "../color-picker/source.stylex";7export function RenderFunction() {8  const [color, setColor] = useState<Color | null>(parseColor("#0485F7"));9  return (10    <ColorField11      xstyle={styles.width280}12      name="color"13      data-custom="foo"14      value={color}15      onChange={setColor}16    >17      {({ isInvalid }) => (18        <>19          <ColorField.Label>Color</ColorField.Label>20          <ColorField.Group data-custom="foo" data-invalid={isInvalid || undefined}>21            <ColorField.Prefix>22              <ColorSwatch color={color ?? undefined} size="xs" />23            </ColorField.Prefix>24            <ColorField.Input />25          </ColorField.Group>26        </>27      )}28    </ColorField>29  );30}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Customization

Tailwind CSS

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { ColorField, ColorSwatch, parseColor } from "@lenso/ui";4import type { Color } from "@lenso/ui";5import { useState } from "react";6import { styles } from "../color-picker/source.stylex";7export function CustomStyles() {8  const [color, setColor] = useState<Color | null>(parseColor("#6366F1"));9  return (10    <ColorField xstyle={styles.customField} name="accent-color" value={color} onChange={setColor}>11      <ColorField.Label xstyle={styles.label}>Accent color</ColorField.Label>12      <ColorField.Description>Applied to buttons, links, and focus rings.</ColorField.Description>13      <ColorField.Group xstyle={styles.customGroup} variant="secondary">14        <ColorField.Prefix>15          <ColorSwatch xstyle={styles.square} color={color ?? undefined} size="xs" />16        </ColorField.Prefix>17        <ColorField.Input xstyle={styles.customInput} />18      </ColorField.Group>19    </ColorField>20  );21}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Global CSS

ColorField has minimal default styling. Override the .color-field class to customize the container styling.

1@layer components {2  .color-field {3    @apply flex flex-col gap-1;4
5    &[data-invalid="true"],6    &[aria-invalid="true"] {7      [data-slot="description"] {8        @apply hidden;9      }10    }11
12    [data-slot="label"] {13      @apply w-fit;14    }15
16    [data-slot="description"] {17      @apply px-1;18    }19  }20}

Styling Reference

HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

.color-field – Root container with minimal styling (flex flex-col gap-1)

Note: Child components (Label, Description, FieldError) have their own CSS classes and styling. See their respective documentation for customization options. ColorField.Group styling is documented below in the API Reference section.

Interactive States

ColorField automatically manages these data attributes based on its state:

Invalid: [data-invalid="true"] or [aria-invalid="true"] - Automatically hides the description slot when invalid
Required: [data-required="true"] - Applied when isRequired is true
Disabled: [data-disabled="true"] - Applied when isDisabled is true
Focus Within: [data-focus-within="true"] - Applied when any child input is focused

API Reference

ColorField

ColorField inherits all props from React Aria's ColorField component.

Base Props

Prop	Type	Default	Description
`children`	`React.ReactNode \| (values: ColorFieldRenderProps) => React.ReactNode`	-	Child components (Label, ColorField.Group, etc.) or render function.
`className`	`string \| (values: ColorFieldRenderProps) => string`	-	CSS classes for styling, supports render props.
`style`	`React.CSSProperties \| (values: ColorFieldRenderProps) => React.CSSProperties`	-	Inline styles, supports render props.
`fullWidth`	`boolean`	`false`	Whether the color field should take full width of its container
`id`	`string`	-	The element's unique identifier.
`render`	`DOMRenderFunction<keyof React.JSX.IntrinsicElements, ColorFieldRenderProps>`	-	Overrides the default DOM element with a custom render function.

Value Props

Prop	Type	Default	Description
`value`	`Color \| null`	-	Current value (controlled).
`defaultValue`	`Color \| null`	-	Default value (uncontrolled).
`onChange`	`(color: Color \| null) => void`	-	Handler called when the value changes.

Channel Props

Prop	Type	Default	Description
`colorSpace`	`ColorSpace`	-	The color space that the color field operates in when `channel` is provided.
`channel`	`ColorChannel`	-	The color channel to edit. If not provided, edits hex value.

Validation Props

Prop	Type	Default	Description
`isRequired`	`boolean`	`false`	Whether user input is required before form submission.
`isInvalid`	`boolean`	-	Whether the value is invalid.
`validate`	`(value: Color) => ValidationError \| true \| null \| undefined`	-	Custom validation function.
`validationBehavior`	`'native' \| 'aria'`	`'native'`	Whether to use native HTML form validation or ARIA attributes.

State Props

Prop	Type	Default	Description
`isDisabled`	`boolean`	-	Whether the input is disabled.
`isReadOnly`	`boolean`	-	Whether the input can be selected but not changed.
`isWheelDisabled`	`boolean`	-	Whether to disable changing the value with scroll.

Form Props

Prop	Type	Default	Description
`name`	`string`	-	Name of the input element, for HTML form submission.
`autoFocus`	`boolean`	-	Whether the element should receive focus on render.

Accessibility Props

Prop	Type	Default	Description
`aria-label`	`string`	-	Accessibility label when no visible label is present.
`aria-labelledby`	`string`	-	ID of elements that label this field.
`aria-describedby`	`string`	-	ID of elements that describe this field.
`aria-details`	`string`	-	ID of elements with additional details.

Composition Components

ColorField works with these separate components that should be imported and used directly:

Label - Field label component from @lenso/ui
ColorField.Group - Color input group component (documented below)
ColorField.Input - Input element within ColorField.Group
ColorField.Prefix / ColorField.Suffix - Prefix and suffix slots for the input group
ColorSwatch - Color preview component from @lenso/ui
Description - Helper text component from @lenso/ui
FieldError - Validation error message from @lenso/ui

Each of these components has its own props API. Use them directly within ColorField for composition:

1import {ColorField, Label, ColorSwatch, Description, FieldError, parseColor} from '@lenso/ui';2
3<ColorField4  isRequired5  isInvalid={hasError}6  value={color}7  onChange={setColor}8>9  <Label>Brand Color</Label>10  <ColorField.Group>11    <ColorField.Prefix>12      <ColorSwatch color={color?.toString("hex") || "#E4E4E7"} />13    </ColorField.Prefix>14    <ColorField.Input />15  </ColorField.Group>16  <Description>Select your brand's primary color.</Description>17  <FieldError>Please enter a valid color.</FieldError>18</ColorField>

Color Types

ColorField uses Color objects from React Aria Components:

1import {parseColor} from '@lenso/ui';2
3// Parse from hex string4const color = parseColor('#3B82F6');5
6// Get hex string from color7const hex = color.toString('hex'); // "#3b82f6"8
9// Get RGB values10const rgb = color.toString('rgb'); // "rgb(59, 130, 246)"11
12// Use in ColorField13<ColorField value={color} onChange={setColor}>14  {/* ... */}15</ColorField>

Render Props

When using render props with className, style, or children, these values are available:

Prop	Type	Description
`isDisabled`	`boolean`	Whether the field is disabled.
`isInvalid`	`boolean`	Whether the field is currently invalid.
`isReadOnly`	`boolean`	Whether the field is read-only.
`isRequired`	`boolean`	Whether the field is required.
`isFocused`	`boolean`	Whether the field is currently focused.
`isFocusWithin`	`boolean`	Whether any child element is focused.
`isFocusVisible`	`boolean`	Whether focus is visible (keyboard navigation).

ColorField.Group

ColorField.Group accepts all props from React Aria's Group component plus the following:

Prop	Type	Default	Description
`className`	`string`	-	Tailwind classes merged with the component styles.
`fullWidth`	`boolean`	`false`	Whether the color input group should take full width of its container
`variant`	`"primary" \| "secondary"`	`"primary"`	Visual variant of the component. `primary` is the default style with shadow. `secondary` is a lower emphasis variant without shadow, suitable for use in surfaces.
`render`	`DOMRenderFunction<keyof React.JSX.IntrinsicElements, GroupRenderProps>`	-	Overrides the default DOM element with a custom render function.

ColorField.Input

ColorField.Input accepts all props from React Aria's Input component plus the following:

Prop	Type	Default	Description
`className`	`string`	-	Tailwind classes merged with the component styles.
`placeholder`	`string`	-	Placeholder text shown when empty.

ColorField.Prefix

ColorField.Prefix accepts standard HTML div attributes:

Prop	Type	Default	Description
`className`	`string`	-	Tailwind classes merged with the component styles.
`children`	`ReactNode`	-	Content to display in the prefix slot.

ColorField.Suffix

ColorField.Suffix accepts standard HTML div attributes:

Prop	Type	Default	Description
`className`	`string`	-	Tailwind classes merged with the component styles.
`children`	`ReactNode`	-	Content to display in the suffix slot.

ColorField.Group Styling

Customizing the component classes

The base classes power every instance. Override them once with @layer components.

1@layer components {2  .color-input-group {3    @apply inline-flex h-9 items-center overflow-hidden rounded-field border bg-field text-sm text-field-foreground shadow-field outline-none;4
5    &:hover,6    &[data-hovered="true"] {7      @apply bg-field-hover;8    }9
10    &[data-focus-within="true"],11    &:focus-within {12      @apply status-focused-field;13    }14
15    &[data-invalid="true"] {16      @apply status-invalid-field;17    }18
19    &[data-disabled="true"],20    &[aria-disabled="true"] {21      @apply status-disabled;22    }23  }24
25  .color-input-group__input {26    @apply flex flex-1 items-center rounded-none border-0 bg-transparent px-3 py-2 shadow-none outline-none;27  }28
29  .color-input-group__prefix,30  .color-input-group__suffix {31    @apply shrink-0 text-field-placeholder flex items-center;32  }33}

ColorField.Group CSS Classes

.color-input-group – Root container styling
.color-input-group__input – Input wrapper styling
.color-input-group__prefix – Prefix element styling
.color-input-group__suffix – Suffix element styling

ColorField.Group Interactive States

Hover: :hover or [data-hovered="true"]
Focus Within: [data-focus-within="true"] or :focus-within
Invalid: [data-invalid="true"] (also syncs with aria-invalid)
Disabled: [data-disabled="true"] or [aria-disabled="true"]

ColorSwatch

A visual preview of a color value with accessibility support

ColorSwatchPicker

A list of color swatches that allows users to select a color from a predefined palette.

ColorPicker

A composable color picker that synchronizes color value between multiple color components

ColorField

Usage

Anatomy

Examples

Variants

On Surface

With Description

Required Field

Disabled State

Full Width

Validation

Channel Editing

Controlled

Form Example

Render Function

Customization

Tailwind CSS

Global CSS

Styling Reference

CSS Classes

Interactive States

API Reference

ColorField

Base Props

Value Props

Channel Props

Validation Props

State Props

Form Props

Accessibility Props

Composition Components

Color Types

Render Props

ColorField.Group

ColorField.Input

ColorField.Prefix

ColorField.Suffix

ColorField.Group Styling

Customizing the component classes

ColorField.Group CSS Classes

ColorField.Group Interactive States

Related Components