# Color Picker

URL: https://ark-ui.com/docs/components/color-picker
Source: https://raw.githubusercontent.com/chakra-ui/ark/refs/heads/main/website/src/content/pages/components/color-picker.mdx

A component that allows users to select a color from a color picker.

---

<ComponentPreview id="ColorPicker" />

## Anatomy

<Anatomy id="color-picker" />

```tsx
<ColorPicker.Root>
  <ColorPicker.Label />
  <ColorPicker.Control>
    <ColorPicker.ChannelInput />
    <ColorPicker.Trigger>
      <ColorPicker.ValueSwatch />
    </ColorPicker.Trigger>
  </ColorPicker.Control>
  <ColorPicker.Positioner>
    <ColorPicker.Content>
      <ColorPicker.Area>
        <ColorPicker.AreaBackground />
        <ColorPicker.AreaThumb />
      </ColorPicker.Area>
      <ColorPicker.EyeDropperTrigger />
      <ColorPicker.ChannelSlider>
        <ColorPicker.ChannelSliderTrack />
        <ColorPicker.ChannelSliderThumb />
      </ColorPicker.ChannelSlider>
      <ColorPicker.SwatchGroup>
        <ColorPicker.SwatchTrigger>
          <ColorPicker.Swatch />
        </ColorPicker.SwatchTrigger>
      </ColorPicker.SwatchGroup>
    </ColorPicker.Content>
  </ColorPicker.Positioner>
  <ColorPicker.HiddenInput />
</ColorPicker.Root>
```

## Examples

**Example: basic**

```ripple
import { ColorPicker, parseColor } from 'ark-ripple/color-picker';
import { Pipette } from 'lucide-ripple';
import styles from 'styles/color-picker.module.css';

export component Basic() {
  <ColorPicker.Root class={styles.Root} defaultValue={parseColor('#eb5e41')}>
    <ColorPicker.Label class={styles.Label}>{'Color'}</ColorPicker.Label>
    <ColorPicker.Control class={styles.Control}>
      <ColorPicker.ChannelInput class={styles.Input} channel="hex" />
      <ColorPicker.ChannelInput class={styles.ChannelInput} channel="alpha" />
      <ColorPicker.Trigger class={styles.Trigger}>
        <div class={styles.Swatch}>
          <ColorPicker.TransparencyGrid class={styles.TransparencyGrid} />
          <ColorPicker.ValueSwatch class={styles.ValueSwatch} />
        </div>
      </ColorPicker.Trigger>
    </ColorPicker.Control>
    <ColorPicker.Positioner>
      <ColorPicker.Content class={styles.Content}>
        <ColorPicker.Area class={styles.Area}>
          <ColorPicker.AreaBackground class={styles.AreaBackground} />
          <ColorPicker.AreaThumb class={styles.AreaThumb} />
        </ColorPicker.Area>
        <div class={styles.SliderGroup}>
          <ColorPicker.EyeDropperTrigger class={styles.EyeDropperTrigger}>
            <Pipette />
          </ColorPicker.EyeDropperTrigger>
          <div class={styles.ChannelSliders}>
            <ColorPicker.ChannelSlider class={styles.ChannelSlider} channel="hue">
              <ColorPicker.ChannelSliderTrack class={styles.ChannelSliderTrack} />
              <ColorPicker.ChannelSliderThumb class={styles.ChannelSliderThumb} />
            </ColorPicker.ChannelSlider>
            <ColorPicker.ChannelSlider class={styles.ChannelSlider} channel="alpha">
              <ColorPicker.TransparencyGrid class={styles.TransparencyGrid} />
              <ColorPicker.ChannelSliderTrack class={styles.ChannelSliderTrack} />
              <ColorPicker.ChannelSliderThumb class={styles.ChannelSliderThumb} />
            </ColorPicker.ChannelSlider>
          </div>
        </div>
      </ColorPicker.Content>
    </ColorPicker.Positioner>
    <ColorPicker.HiddenInput />
  </ColorPicker.Root>
}

```

### Controlled

Use the `value` and `onValueChange` props to programatically control the color picker's state.

**Example: controlled**

```ripple
import { ColorPicker, parseColor } from 'ark-ripple/color-picker';
import { Pipette } from 'lucide-ripple';
import { track } from 'ripple';
import styles from 'styles/color-picker.module.css';

export component Controlled() {
  let color = track(parseColor('hsl(20, 100%, 50%)'));

  <div class="stack">
    <output>
      {'Selected color: '}
      {@color.toString('hex')}
    </output>
    <ColorPicker.Root
      class={styles.Root}
      value={color}
      onValueChange={(e) => {
        @color = e.value;
      }}
    >
      <ColorPicker.Label class={styles.Label}>{'Color'}</ColorPicker.Label>
      <ColorPicker.Control class={styles.Control}>
        <ColorPicker.ChannelInput class={styles.Input} channel="hex" />
        <ColorPicker.ChannelInput class={styles.ChannelInput} channel="alpha" />
        <ColorPicker.Trigger class={styles.Trigger}>
          <div class={styles.Swatch}>
            <ColorPicker.TransparencyGrid class={styles.TransparencyGrid} />
            <ColorPicker.ValueSwatch class={styles.ValueSwatch} />
          </div>
        </ColorPicker.Trigger>
      </ColorPicker.Control>
      <ColorPicker.Positioner>
        <ColorPicker.Content class={styles.Content}>
          <ColorPicker.Area class={styles.Area}>
            <ColorPicker.AreaBackground class={styles.AreaBackground} />
            <ColorPicker.AreaThumb class={styles.AreaThumb} />
          </ColorPicker.Area>
          <div class={styles.SliderGroup}>
            <ColorPicker.EyeDropperTrigger class={styles.EyeDropperTrigger}>
              <Pipette />
            </ColorPicker.EyeDropperTrigger>
            <div class={styles.ChannelSliders}>
              <ColorPicker.ChannelSlider class={styles.ChannelSlider} channel="hue">
                <ColorPicker.ChannelSliderTrack class={styles.ChannelSliderTrack} />
                <ColorPicker.ChannelSliderThumb class={styles.ChannelSliderThumb} />
              </ColorPicker.ChannelSlider>
              <ColorPicker.ChannelSlider class={styles.ChannelSlider} channel="alpha">
                <ColorPicker.TransparencyGrid class={styles.TransparencyGrid} />
                <ColorPicker.ChannelSliderTrack class={styles.ChannelSliderTrack} />
                <ColorPicker.ChannelSliderThumb class={styles.ChannelSliderThumb} />
              </ColorPicker.ChannelSlider>
            </div>
          </div>
        </ColorPicker.Content>
      </ColorPicker.Positioner>
      <ColorPicker.HiddenInput />
    </ColorPicker.Root>
  </div>
}

```

### Open Controlled

Control the open state of the color picker popover programmatically using the `open` and `onOpenChange` props.

**Example: open-controlled**

```ripple
import { ColorPicker, parseColor } from 'ark-ripple/color-picker';
import { Pipette } from 'lucide-ripple';
import { track } from 'ripple';
import styles from 'styles/color-picker.module.css';
import button from 'styles/button.module.css';

export component OpenControlled() {
  let open = track(false);

  <div class="stack">
    <button
      class={button.Root}
      onClick={() => {
        @open = !@open;
      }}
    >
      {'Toggle'}
    </button>
    <ColorPicker.Root
      class={styles.Root}
      {open}
      onOpenChange={(e) => {
        @open = e.open;
      }}
      defaultValue={parseColor('#eb5e41')}
    >
      <ColorPicker.Label class={styles.Label}>{'Color'}</ColorPicker.Label>
      <ColorPicker.Control class={styles.Control}>
        <ColorPicker.ChannelInput class={styles.Input} channel="hex" />
        <ColorPicker.Trigger class={styles.Trigger}>
          <div class={styles.Swatch}>
            <ColorPicker.TransparencyGrid class={styles.TransparencyGrid} />
            <ColorPicker.ValueSwatch class={styles.ValueSwatch} />
          </div>
        </ColorPicker.Trigger>
      </ColorPicker.Control>
      <ColorPicker.Positioner>
        <ColorPicker.Content class={styles.Content}>
          <ColorPicker.Area class={styles.Area}>
            <ColorPicker.AreaBackground class={styles.AreaBackground} />
            <ColorPicker.AreaThumb class={styles.AreaThumb} />
          </ColorPicker.Area>
          <div class={styles.SliderGroup}>
            <ColorPicker.EyeDropperTrigger class={styles.EyeDropperTrigger}>
              <Pipette />
            </ColorPicker.EyeDropperTrigger>
            <div class={styles.ChannelSliders}>
              <ColorPicker.ChannelSlider class={styles.ChannelSlider} channel="hue">
                <ColorPicker.ChannelSliderTrack class={styles.ChannelSliderTrack} />
                <ColorPicker.ChannelSliderThumb class={styles.ChannelSliderThumb} />
              </ColorPicker.ChannelSlider>
              <ColorPicker.ChannelSlider class={styles.ChannelSlider} channel="alpha">
                <ColorPicker.TransparencyGrid class={styles.TransparencyGrid} />
                <ColorPicker.ChannelSliderTrack class={styles.ChannelSliderTrack} />
                <ColorPicker.ChannelSliderThumb class={styles.ChannelSliderThumb} />
              </ColorPicker.ChannelSlider>
            </div>
          </div>
        </ColorPicker.Content>
      </ColorPicker.Positioner>
      <ColorPicker.HiddenInput />
    </ColorPicker.Root>
  </div>
}

```

### Root Provider

An alternative way to control the color picker is to use the `RootProvider` component and the `useColorPicker` hook.
This way you can access the state and methods from outside the component.

**Example: root-provider**

```ripple
import { ColorPicker, parseColor, useColorPicker } from 'ark-ripple/color-picker';
import { Check, Pipette } from 'lucide-ripple';
import styles from 'styles/color-picker.module.css';

const swatches = ['red', 'blue', 'green', 'orange'];

export component RootProvider() {
  const colorPicker = useColorPicker({ defaultValue: parseColor('#eb5e41') });

  <div class="stack">
    <output>
      {'Color: '}
      {@colorPicker.valueAsString}
    </output>

    <ColorPicker.RootProvider class={styles.Root} value={colorPicker}>
      <ColorPicker.Label class={styles.Label}>{'Color'}</ColorPicker.Label>
      <ColorPicker.Control class={styles.Control}>
        <ColorPicker.ChannelInput class={styles.Input} channel="hex" />
        <ColorPicker.ChannelInput class={styles.ChannelInput} channel="alpha" />
        <ColorPicker.Trigger class={styles.Trigger}>
          <div class={styles.Swatch}>
            <ColorPicker.TransparencyGrid class={styles.TransparencyGrid} />
            <ColorPicker.ValueSwatch class={styles.ValueSwatch} />
          </div>
        </ColorPicker.Trigger>
      </ColorPicker.Control>
      <ColorPicker.Positioner>
        <ColorPicker.Content class={styles.Content}>
          <ColorPicker.Area class={styles.Area}>
            <ColorPicker.AreaBackground class={styles.AreaBackground} />
            <ColorPicker.AreaThumb class={styles.AreaThumb} />
          </ColorPicker.Area>
          <div class={styles.SliderGroup}>
            <ColorPicker.EyeDropperTrigger class={styles.EyeDropperTrigger}>
              <Pipette />
            </ColorPicker.EyeDropperTrigger>
            <div class={styles.ChannelSliders}>
              <ColorPicker.ChannelSlider class={styles.ChannelSlider} channel="hue">
                <ColorPicker.ChannelSliderTrack class={styles.ChannelSliderTrack} />
                <ColorPicker.ChannelSliderThumb class={styles.ChannelSliderThumb} />
              </ColorPicker.ChannelSlider>
              <ColorPicker.ChannelSlider class={styles.ChannelSlider} channel="alpha">
                <ColorPicker.TransparencyGrid class={styles.TransparencyGrid} />
                <ColorPicker.ChannelSliderTrack class={styles.ChannelSliderTrack} />
                <ColorPicker.ChannelSliderThumb class={styles.ChannelSliderThumb} />
              </ColorPicker.ChannelSlider>
            </div>
          </div>
          <ColorPicker.SwatchGroup class={styles.SwatchGroup}>
            for (const color of swatches; key color) {
              <ColorPicker.SwatchTrigger class={styles.SwatchTrigger} value={color}>
                <ColorPicker.Swatch class={styles.Swatch} value={color}>
                  <ColorPicker.SwatchIndicator class={styles.SwatchIndicator}>
                    <Check />
                  </ColorPicker.SwatchIndicator>
                </ColorPicker.Swatch>
              </ColorPicker.SwatchTrigger>
            }
          </ColorPicker.SwatchGroup>
          <ColorPicker.View class={styles.View} format="rgba">
            <div class={styles.ChannelInputGroup}>
              <ColorPicker.ChannelInput class={styles.ChannelInput} channel="hex" />
              <ColorPicker.ChannelInput class={styles.ChannelInput} channel="alpha" />
            </div>
          </ColorPicker.View>
          <ColorPicker.View class={styles.View} format="hsla">
            <div class={styles.ChannelInputGroup}>
              <ColorPicker.ChannelInput class={styles.ChannelInput} channel="hue" />
              <ColorPicker.ChannelInput class={styles.ChannelInput} channel="saturation" />
              <ColorPicker.ChannelInput class={styles.ChannelInput} channel="lightness" />
            </div>
          </ColorPicker.View>
        </ColorPicker.Content>
      </ColorPicker.Positioner>
      <ColorPicker.HiddenInput />
    </ColorPicker.RootProvider>
  </div>
}

```

### Disabled

Use the `disabled` prop to disable the color picker.

**Example: disabled**

```ripple
import { ColorPicker, parseColor } from 'ark-ripple/color-picker';
import styles from 'styles/color-picker.module.css';

export component Disabled() {
  <ColorPicker.Root class={styles.Root} disabled defaultValue={parseColor('#eb5e41')}>
    <ColorPicker.Label class={styles.Label}>{'Color'}</ColorPicker.Label>
    <ColorPicker.Control class={styles.Control}>
      <ColorPicker.ChannelInput class={styles.Input} channel="hex" />
      <ColorPicker.Trigger class={styles.Trigger}>
        <div class={styles.Swatch}>
          <ColorPicker.TransparencyGrid class={styles.TransparencyGrid} />
          <ColorPicker.ValueSwatch class={styles.ValueSwatch} />
        </div>
      </ColorPicker.Trigger>
    </ColorPicker.Control>
    <ColorPicker.HiddenInput />
  </ColorPicker.Root>
}

```

### Inline

Render the color picker inline without a popover by using the `inline` prop.

**Example: inline**

```ripple
import { ColorPicker, parseColor } from 'ark-ripple/color-picker';
import { Check } from 'lucide-ripple';
import styles from 'styles/color-picker.module.css';

const swatches = ['red', 'blue', 'green', 'orange'];

export component Inline() {
  <ColorPicker.Root class={styles.Root} inline defaultValue={parseColor('#eb5e41')}>
    <ColorPicker.Area class={styles.Area}>
      <ColorPicker.AreaBackground class={styles.AreaBackground} />
      <ColorPicker.AreaThumb class={styles.AreaThumb} />
    </ColorPicker.Area>
    <ColorPicker.SwatchGroup class={styles.SwatchGroup}>
      for (const color of swatches; key color) {
        <ColorPicker.SwatchTrigger class={styles.SwatchTrigger} value={color}>
          <ColorPicker.Swatch class={styles.Swatch} value={color}>
            <ColorPicker.SwatchIndicator class={styles.SwatchIndicator}>
              <Check />
            </ColorPicker.SwatchIndicator>
          </ColorPicker.Swatch>
        </ColorPicker.SwatchTrigger>
      }
    </ColorPicker.SwatchGroup>
  </ColorPicker.Root>
}

```

### Input Only

A minimal color picker with just an input field, value swatch, and eye dropper trigger.

**Example: input-only**

```ripple
import { ColorPicker, parseColor } from 'ark-ripple/color-picker';
import { Pipette } from 'lucide-ripple';
import styles from 'styles/color-picker.module.css';

export component InputOnly() {
  <ColorPicker.Root class={styles.Root} defaultValue={parseColor('#eb5e41')}>
    <ColorPicker.Label class={styles.Label}>{'Color'}</ColorPicker.Label>
    <ColorPicker.Control class={styles.Control}>
      <ColorPicker.ValueSwatch class={styles.Swatch} />
      <ColorPicker.ChannelInput class={styles.Input} channel="hex" />
      <ColorPicker.EyeDropperTrigger class={styles.EyeDropperTrigger}>
        <Pipette />
      </ColorPicker.EyeDropperTrigger>
    </ColorPicker.Control>
    <ColorPicker.HiddenInput />
  </ColorPicker.Root>
}

```

### Slider Only

Display only the channel sliders for RGB color selection.

**Example: slider-only**

```ripple
import { ColorPicker, parseColor } from 'ark-ripple/color-picker';
import styles from 'styles/color-picker.module.css';

export component SliderOnly() {
  <ColorPicker.Root class={styles.Root} inline defaultValue={parseColor('#5dd016')}>
    <div class="hstack">
      <div class={styles.Swatch}>
        <ColorPicker.TransparencyGrid class={styles.TransparencyGrid} />
        <ColorPicker.ValueSwatch class={styles.ValueSwatch} />
      </div>
      <ColorPicker.ValueText class={styles.ValueText} />
    </div>
    <ColorPicker.View class={styles.View} format="rgba">
      <div class={styles.ChannelSliderRow}>
        <span class={styles.ChannelSliderLabel}>{'R'}</span>
        <ColorPicker.ChannelSlider class={styles.ChannelSlider} channel="red">
          <ColorPicker.TransparencyGrid class={styles.TransparencyGrid} />
          <ColorPicker.ChannelSliderTrack class={styles.ChannelSliderTrack} />
          <ColorPicker.ChannelSliderThumb class={styles.ChannelSliderThumb} />
        </ColorPicker.ChannelSlider>
      </div>
      <div class={styles.ChannelSliderRow}>
        <span class={styles.ChannelSliderLabel}>{'G'}</span>
        <ColorPicker.ChannelSlider class={styles.ChannelSlider} channel="green">
          <ColorPicker.TransparencyGrid class={styles.TransparencyGrid} />
          <ColorPicker.ChannelSliderTrack class={styles.ChannelSliderTrack} />
          <ColorPicker.ChannelSliderThumb class={styles.ChannelSliderThumb} />
        </ColorPicker.ChannelSlider>
      </div>
      <div class={styles.ChannelSliderRow}>
        <span class={styles.ChannelSliderLabel}>{'B'}</span>
        <ColorPicker.ChannelSlider class={styles.ChannelSlider} channel="blue">
          <ColorPicker.TransparencyGrid class={styles.TransparencyGrid} />
          <ColorPicker.ChannelSliderTrack class={styles.ChannelSliderTrack} />
          <ColorPicker.ChannelSliderThumb class={styles.ChannelSliderThumb} />
        </ColorPicker.ChannelSlider>
      </div>
    </ColorPicker.View>
  </ColorPicker.Root>
}

```

### Swatch Only

A simple color picker with only preset color swatches.

**Example: swatch-only**

```ripple
import { ColorPicker, parseColor } from 'ark-ripple/color-picker';
import { Check } from 'lucide-ripple';
import styles from 'styles/color-picker.module.css';

const swatches = ['red', 'pink', 'orange', 'purple'];

export component SwatchOnly() {
  <ColorPicker.Root class={styles.Root} inline defaultValue={parseColor('#eb5e41')}>
    <output>
      {'Selected color: '}
      <ColorPicker.ValueText class={styles.ValueText} />
    </output>
    <ColorPicker.SwatchGroup class={styles.SwatchGroup}>
      for (const color of swatches; key color) {
        <ColorPicker.SwatchTrigger class={styles.SwatchTrigger} value={color}>
          <ColorPicker.Swatch class={styles.Swatch} value={color}>
            <ColorPicker.SwatchIndicator class={styles.SwatchIndicator}>
              <Check />
            </ColorPicker.SwatchIndicator>
          </ColorPicker.Swatch>
        </ColorPicker.SwatchTrigger>
      }
    </ColorPicker.SwatchGroup>
  </ColorPicker.Root>
}

```

### Swatches

Include preset color swatches in the color picker content for quick color selection.

**Example: swatches**

```ripple
import { ColorPicker, parseColor } from 'ark-ripple/color-picker';
import { Check, Pipette } from 'lucide-ripple';
import styles from 'styles/color-picker.module.css';

const swatches = ['red', 'blue', 'green', 'orange'];

export component Swatches() {
  <ColorPicker.Root class={styles.Root} defaultValue={parseColor('#eb5e41')}>
    <ColorPicker.Label class={styles.Label}>{'Color'}</ColorPicker.Label>
    <ColorPicker.Control class={styles.Control}>
      <ColorPicker.ChannelInput class={styles.Input} channel="hex" />
      <ColorPicker.ChannelInput class={styles.ChannelInput} channel="alpha" />
      <ColorPicker.Trigger class={styles.Trigger}>
        <div class={styles.Swatch}>
          <ColorPicker.TransparencyGrid class={styles.TransparencyGrid} />
          <ColorPicker.ValueSwatch class={styles.ValueSwatch} />
        </div>
      </ColorPicker.Trigger>
    </ColorPicker.Control>
    <ColorPicker.Positioner>
      <ColorPicker.Content class={styles.Content}>
        <ColorPicker.Area class={styles.Area}>
          <ColorPicker.AreaBackground class={styles.AreaBackground} />
          <ColorPicker.AreaThumb class={styles.AreaThumb} />
        </ColorPicker.Area>
        <div class={styles.SliderGroup}>
          <ColorPicker.EyeDropperTrigger class={styles.EyeDropperTrigger}>
            <Pipette />
          </ColorPicker.EyeDropperTrigger>
          <div class={styles.ChannelSliders}>
            <ColorPicker.ChannelSlider class={styles.ChannelSlider} channel="hue">
              <ColorPicker.ChannelSliderTrack class={styles.ChannelSliderTrack} />
              <ColorPicker.ChannelSliderThumb class={styles.ChannelSliderThumb} />
            </ColorPicker.ChannelSlider>
            <ColorPicker.ChannelSlider class={styles.ChannelSlider} channel="alpha">
              <ColorPicker.TransparencyGrid class={styles.TransparencyGrid} />
              <ColorPicker.ChannelSliderTrack class={styles.ChannelSliderTrack} />
              <ColorPicker.ChannelSliderThumb class={styles.ChannelSliderThumb} />
            </ColorPicker.ChannelSlider>
          </div>
        </div>
        <ColorPicker.SwatchGroup class={styles.SwatchGroup}>
          for (const color of swatches; key color) {
            <ColorPicker.SwatchTrigger class={styles.SwatchTrigger} value={color}>
              <ColorPicker.Swatch class={styles.Swatch} value={color}>
                <ColorPicker.SwatchIndicator class={styles.SwatchIndicator}>
                  <Check />
                </ColorPicker.SwatchIndicator>
              </ColorPicker.Swatch>
            </ColorPicker.SwatchTrigger>
          }
        </ColorPicker.SwatchGroup>
      </ColorPicker.Content>
    </ColorPicker.Positioner>
    <ColorPicker.HiddenInput />
  </ColorPicker.Root>
}

```

### Value Swatch

Display the current color value as a swatch alongside the color area and sliders.

**Example: value-swatch**

```ripple
import { ColorPicker, parseColor } from 'ark-ripple/color-picker';
import styles from 'styles/color-picker.module.css';

export component ValueSwatch() {
  <ColorPicker.Root class={styles.Root} inline defaultValue={parseColor('#eb5e41')}>
    <ColorPicker.Area class={styles.Area}>
      <ColorPicker.AreaBackground class={styles.AreaBackground} />
      <ColorPicker.AreaThumb class={styles.AreaThumb} />
    </ColorPicker.Area>
    <div class={styles.SliderGroup}>
      <div class={styles.Swatch}>
        <ColorPicker.TransparencyGrid class={styles.TransparencyGrid} />
        <ColorPicker.ValueSwatch class={styles.ValueSwatch} />
      </div>
      <div class={styles.ChannelSliders}>
        <ColorPicker.ChannelSlider class={styles.ChannelSlider} channel="hue">
          <ColorPicker.ChannelSliderTrack class={styles.ChannelSliderTrack} />
          <ColorPicker.ChannelSliderThumb class={styles.ChannelSliderThumb} />
        </ColorPicker.ChannelSlider>
        <ColorPicker.ChannelSlider class={styles.ChannelSlider} channel="alpha">
          <ColorPicker.TransparencyGrid class={styles.TransparencyGrid} />
          <ColorPicker.ChannelSliderTrack class={styles.ChannelSliderTrack} />
          <ColorPicker.ChannelSliderThumb class={styles.ChannelSliderThumb} />
        </ColorPicker.ChannelSlider>
      </div>
    </div>
  </ColorPicker.Root>
}

```

### Field

The `Field` component helps manage form-related state and accessibility attributes of a color picker. It includes
handling ARIA labels, helper text, and error text to ensure proper accessibility.

**Example: with-field**

```ripple
import { ColorPicker, parseColor } from 'ark-ripple/color-picker';
import { Field } from 'ark-ripple/field';
import styles from 'styles/color-picker.module.css';
import field from 'styles/field.module.css';

export component WithField() {
  <Field.Root class={field.Root}>
    <ColorPicker.Root class={styles.Root} defaultValue={parseColor('#eb5e41')}>
      <ColorPicker.Label class={styles.Label}>{'Label'}</ColorPicker.Label>
      <ColorPicker.Control class={styles.Control}>
        <ColorPicker.ChannelInput class={styles.Input} channel="hex" />
        <ColorPicker.ChannelInput class={styles.ChannelInput} channel="alpha" />
        <ColorPicker.Trigger class={styles.Trigger}>
          <div class={styles.Swatch}>
            <ColorPicker.TransparencyGrid class={styles.TransparencyGrid} />
            <ColorPicker.ValueSwatch class={styles.ValueSwatch} />
          </div>
        </ColorPicker.Trigger>
      </ColorPicker.Control>
      <ColorPicker.Positioner>
        <ColorPicker.Content class={styles.Content} />
      </ColorPicker.Positioner>
      <ColorPicker.HiddenInput />
    </ColorPicker.Root>
    <Field.HelperText class={field.HelperText}>{'Additional Info'}</Field.HelperText>
    <Field.ErrorText class={field.ErrorText}>{'Error Info'}</Field.ErrorText>
  </Field.Root>
}

```

### Form Usage

Integrate the color picker with form libraries like React Hook Form using the `HiddenInput` component.

**Example: form-usage**

```ripple
import { ColorPicker, parseColor } from 'ark-ripple/color-picker';
import { Pipette } from 'lucide-ripple';
import styles from 'styles/color-picker.module.css';
import button from 'styles/button.module.css';

export component FormUsage() {
  const onSubmit = (e: Event) => {
    e.preventDefault();
    const form = e.target as HTMLFormElement;
    alert(JSON.stringify(Object.fromEntries(new FormData(form))));
  };

  <form {onSubmit}>
    <ColorPicker.Root class={styles.Root} inline defaultValue={parseColor('#eb5e41')}>
      <ColorPicker.HiddenInput name="color" />
      <ColorPicker.Area class={styles.Area}>
        <ColorPicker.AreaBackground class={styles.AreaBackground} />
        <ColorPicker.AreaThumb class={styles.AreaThumb} />
      </ColorPicker.Area>
      <div class={styles.SliderGroup}>
        <ColorPicker.EyeDropperTrigger class={styles.EyeDropperTrigger}>
          <Pipette />
        </ColorPicker.EyeDropperTrigger>
        <div class={styles.ChannelSliders}>
          <ColorPicker.ChannelSlider class={styles.ChannelSlider} channel="hue">
            <ColorPicker.ChannelSliderTrack class={styles.ChannelSliderTrack} />
            <ColorPicker.ChannelSliderThumb class={styles.ChannelSliderThumb} />
          </ColorPicker.ChannelSlider>
          <ColorPicker.ChannelSlider class={styles.ChannelSlider} channel="alpha">
            <ColorPicker.TransparencyGrid class={styles.TransparencyGrid} />
            <ColorPicker.ChannelSliderTrack class={styles.ChannelSliderTrack} />
            <ColorPicker.ChannelSliderThumb class={styles.ChannelSliderThumb} />
          </ColorPicker.ChannelSlider>
        </div>
      </div>
      <ColorPicker.View class={styles.View} format="rgba">
        <div class={styles.ChannelInputGroup}>
          <ColorPicker.ChannelInput class={styles.ChannelInput} channel="hex" />
          <ColorPicker.ChannelInput class={styles.ChannelInput} channel="alpha" />
        </div>
      </ColorPicker.View>
      <ColorPicker.View class={styles.View} format="hsla">
        <div class={styles.ChannelInputGroup}>
          <ColorPicker.ChannelInput class={styles.ChannelInput} channel="hue" />
          <ColorPicker.ChannelInput class={styles.ChannelInput} channel="saturation" />
          <ColorPicker.ChannelInput class={styles.ChannelInput} channel="lightness" />
        </div>
      </ColorPicker.View>
      <button class={button.Root} type="submit" data-variant="solid">{'Submit'}</button>
    </ColorPicker.Root>
  </form>
}

```

## API Reference

### Props

**Component API Reference**

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `closeOnSelect` | `boolean` | No | Whether to close the color picker when a swatch is selected |
| `defaultFormat` | `ColorFormat` | No | The initial color format when rendered.
Use when you don't need to control the color format of the color picker. |
| `defaultOpen` | `boolean` | No | The initial open state of the color picker when rendered.
Use when you don't need to control the open state of the color picker. |
| `defaultValue` | `Color` | No | The initial color value when rendered.
Use when you don't need to control the color value of the color picker. |
| `disabled` | `boolean` | No | Whether the color picker is disabled |
| `format` | `ColorFormat` | No | The controlled color format to use |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{ root: string; control: string; trigger: string; label: string; input: string; hiddenInput: string; content: string; area: string; areaGradient: string; positioner: string; formatSelect: string; areaThumb: string; channelInput: (id: string) => string; channelSliderTrack: (id: ColorChannel) => string; channe...` | No | The ids of the elements in the color picker. Useful for composition. |
| `immediate` | `boolean` | No | Whether to synchronize the present change immediately or defer it to the next frame |
| `initialFocusEl` | `() => HTMLElement | null` | No | The initial focus element when the color picker is opened. |
| `inline` | `boolean` | No | Whether to render the color picker inline |
| `invalid` | `boolean` | No | Whether the color picker is invalid |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `name` | `string` | No | The name for the form input |
| `onExitComplete` | `VoidFunction` | No | Function called when the animation ends in the closed state |
| `onFocusOutside` | `(event: FocusOutsideEvent) => void` | No | Function called when the focus is moved outside the component |
| `onFormatChange` | `(details: FormatChangeDetails) => void` | No | Function called when the color format changes |
| `onInteractOutside` | `(event: InteractOutsideEvent) => void` | No | Function called when an interaction happens outside the component |
| `onOpenChange` | `(details: OpenChangeDetails) => void` | No | Handler that is called when the user opens or closes the color picker. |
| `onPointerDownOutside` | `(event: PointerDownOutsideEvent) => void` | No | Function called when the pointer is pressed down outside the component |
| `onValueChange` | `(details: ValueChangeDetails) => void` | No | Handler that is called when the value changes, as the user drags. |
| `onValueChangeEnd` | `(details: ValueChangeDetails) => void` | No | Handler that is called when the user stops dragging. |
| `open` | `boolean` | No | The controlled open state of the color picker |
| `openAutoFocus` | `boolean` | No | Whether to auto focus the color picker when it is opened |
| `positioning` | `PositioningOptions` | No | The positioning options for the color picker |
| `present` | `boolean` | No | Whether the node is present (controlled by the user) |
| `readOnly` | `boolean` | No | Whether the color picker is read-only |
| `required` | `boolean` | No | Whether the color picker is required |
| `skipAnimationOnMount` | `boolean` | No | Whether to allow the initial presence animation. |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |
| `value` | `Color` | No | The controlled color value of the color picker |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | color-picker |
| `[data-part]` | root |
| `[data-disabled]` | Present when disabled |
| `[data-readonly]` | Present when read-only |
| `[data-invalid]` | Present when invalid |


**Root CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--value` | The current value |


**AreaBackground Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**AreaBackground Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | color-picker |
| `[data-part]` | area-background |
| `[data-invalid]` | Present when invalid |
| `[data-disabled]` | Present when disabled |
| `[data-readonly]` | Present when read-only |


**Area Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `xChannel` | `ColorChannel` | No |  |
| `yChannel` | `ColorChannel` | No |  |


**Area Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | color-picker |
| `[data-part]` | area |
| `[data-invalid]` | Present when invalid |
| `[data-disabled]` | Present when disabled |
| `[data-readonly]` | Present when read-only |


**AreaThumb Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**AreaThumb Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | color-picker |
| `[data-part]` | area-thumb |
| `[data-disabled]` | Present when disabled |
| `[data-invalid]` | Present when invalid |
| `[data-readonly]` | Present when read-only |


**AreaThumb CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--color` | The text color |


**ChannelInput Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `channel` | `ExtendedColorChannel` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `orientation` | `Orientation` | No |  |


**ChannelInput Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | color-picker |
| `[data-part]` | channel-input |
| `[data-channel]` | The color channel of the channelinput |
| `[data-disabled]` | Present when disabled |
| `[data-invalid]` | Present when invalid |
| `[data-readonly]` | Present when read-only |


**ChannelSliderLabel Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ChannelSliderLabel Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | color-picker |
| `[data-part]` | channel-slider-label |
| `[data-channel]` | The color channel of the channelsliderlabel |


**ChannelSlider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `channel` | `ColorChannel` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `orientation` | `Orientation` | No |  |


**ChannelSlider Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | color-picker |
| `[data-part]` | channel-slider |
| `[data-channel]` | The color channel of the channelslider |
| `[data-orientation]` | The orientation of the channelslider |


**ChannelSliderThumb Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ChannelSliderThumb Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | color-picker |
| `[data-part]` | channel-slider-thumb |
| `[data-channel]` | The color channel of the channelsliderthumb |
| `[data-disabled]` | Present when disabled |
| `[data-orientation]` | The orientation of the channelsliderthumb |


**ChannelSliderTrack Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ChannelSliderTrack Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | color-picker |
| `[data-part]` | channel-slider-track |
| `[data-channel]` | The color channel of the channelslidertrack |
| `[data-orientation]` | The orientation of the channelslidertrack |


**ChannelSliderValueText Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ChannelSliderValueText Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | color-picker |
| `[data-part]` | channel-slider-value-text |
| `[data-channel]` | The color channel of the channelslidervaluetext |


**Content Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Content Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | color-picker |
| `[data-part]` | content |
| `[data-placement]` | The placement of the content |
| `[data-nested]` | popover |
| `[data-has-nested]` | popover |
| `[data-state]` | "open" | "closed" |


**Content CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--layer-index` | The index of the dismissable in the layer stack |
| `--nested-layer-count` | The number of nested color-pickers |


**Control Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Control Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | color-picker |
| `[data-part]` | control |
| `[data-disabled]` | Present when disabled |
| `[data-readonly]` | Present when read-only |
| `[data-invalid]` | Present when invalid |
| `[data-state]` | "open" | "closed" |
| `[data-focus]` | Present when focused |


**EyeDropperTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**EyeDropperTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | color-picker |
| `[data-part]` | eye-dropper-trigger |
| `[data-disabled]` | Present when disabled |
| `[data-invalid]` | Present when invalid |
| `[data-readonly]` | Present when read-only |


**FormatSelect Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**FormatTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**HiddenInput Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | color-picker |
| `[data-part]` | label |
| `[data-disabled]` | Present when disabled |
| `[data-readonly]` | Present when read-only |
| `[data-invalid]` | Present when invalid |
| `[data-required]` | Present when required |
| `[data-focus]` | Present when focused |


**Positioner Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Positioner CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--reference-width` | The width of the reference element |
| `--reference-height` | The height of the root |
| `--available-width` | The available width in viewport |
| `--available-height` | The available height in viewport |
| `--x` | The x position for transform |
| `--y` | The y position for transform |
| `--z-index` | The z-index value |
| `--transform-origin` | The transform origin for animations |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseColorPickerReturn` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `immediate` | `boolean` | No | Whether to synchronize the present change immediately or defer it to the next frame |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `onExitComplete` | `VoidFunction` | No | Function called when the animation ends in the closed state |
| `present` | `boolean` | No | Whether the node is present (controlled by the user) |
| `skipAnimationOnMount` | `boolean` | No | Whether to allow the initial presence animation. |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |


**SwatchGroup Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**SwatchIndicator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Swatch Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `string | Color` | Yes | The color value |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `respectAlpha` | `boolean` | No | Whether to include the alpha channel in the color |


**Swatch Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | color-picker |
| `[data-part]` | swatch |
| `[data-state]` | "checked" | "unchecked" |
| `[data-value]` | The value of the item |


**Swatch CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--color` | The text color |


**SwatchTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `string | Color` | Yes | The color value |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `disabled` | `boolean` | No | Whether the swatch trigger is disabled |


**SwatchTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | color-picker |
| `[data-part]` | swatch-trigger |
| `[data-state]` | "checked" | "unchecked" |
| `[data-value]` | The value of the item |
| `[data-disabled]` | Present when disabled |


**SwatchTrigger CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--color` | The text color |


**TransparencyGrid Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `size` | `string` | No |  |


**TransparencyGrid CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--size` | The size (width and height) of the element |


**Trigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Trigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | color-picker |
| `[data-part]` | trigger |
| `[data-disabled]` | Present when disabled |
| `[data-readonly]` | Present when read-only |
| `[data-invalid]` | Present when invalid |
| `[data-placement]` | The placement of the trigger |
| `[data-state]` | "open" | "closed" |
| `[data-focus]` | Present when focused |


**ValueSwatch Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `respectAlpha` | `boolean` | No | Whether to include the alpha channel in the color |


**ValueText Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `format` | `ColorStringFormat` | No |  |


**ValueText Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | color-picker |
| `[data-part]` | value-text |
| `[data-disabled]` | Present when disabled |
| `[data-focus]` | Present when focused |


**View Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `format` | `ColorFormat` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


### Context

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `dragging` | `boolean` | Whether the color picker is being dragged |
| `open` | `boolean` | Whether the color picker is open |
| `inline` | `boolean` | Whether the color picker is rendered inline |
| `value` | `Color` | The current color value (as a string) |
| `valueAsString` | `string` | The current color value (as a Color object) |
| `setValue` | `(value: string | Color) => void` | Function to set the color value |
| `getChannelValue` | `(channel: ColorChannel) => string` | Function to set the color value |
| `getChannelValueText` | `(channel: ColorChannel, locale: string) => string` | Function to get the formatted and localized value of a specific channel |
| `setChannelValue` | `(channel: ColorChannel, value: number) => void` | Function to set the color value of a specific channel |
| `format` | `ColorFormat` | The current color format |
| `setFormat` | `(format: ColorFormat) => void` | Function to set the color format |
| `alpha` | `number` | The alpha value of the color |
| `setAlpha` | `(value: number) => void` | Function to set the color alpha |
| `setOpen` | `(open: boolean) => void` | Function to open or close the color picker |


## Accessibility

### Keyboard Support

<KeyBindingsTable id="color-picker" />