# 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

To set up the color picker correctly, you'll need to understand its anatomy and how we name its parts.

> Each part includes a `data-part` attribute to help identify them in the DOM.

<Anatomy id="color-picker" />

## Examples

Learn how to use the `ColorPicker` component in your project. Let's take a look at the most basic example

<Example id="basic" />

### Controlled

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

<Example id="controlled" />

> Alternatively, the `onValueChangeEnd` prop can be used to listen for when the user has finished selecting a color.

### 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 id="with-field" />

### Root Provider

Use the `useColorPicker` hook to create the color picker store and pass it to the `ColorPicker.RootProvider` component.
This allows you to have maximum control over the color picker programmatically.

<Example id="root-provider" />

> If you're using the `ColorPicker.RootProvider` component, you don't need to use the `ColorPicker.Root` component.

## API Reference

### Props

**Component API Reference**

#### React

**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 |


**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 |


**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" |


**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. |


**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 |


**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 |


**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 |  |


**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. |


#### Solid

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | 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 |
| `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 |


**AreaBackground Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | 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` | `(props: ParentProps<'div'>) => Element` | 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` | `(props: ParentProps<'div'>) => Element` | 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 |


**ChannelInput Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `channel` | `ExtendedColorChannel` | Yes |  |
| `asChild` | `(props: ParentProps<'input'>) => Element` | 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` | `(props: ParentProps<'label'>) => Element` | 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` | `(props: ParentProps<'div'>) => Element` | 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` | `(props: ParentProps<'div'>) => Element` | 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` | `(props: ParentProps<'div'>) => Element` | 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` | `(props: ParentProps<'span'>) => Element` | 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` | `(props: ParentProps<'div'>) => Element` | 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" |


**Control Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | 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` | `(props: ParentProps<'button'>) => Element` | 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` | `(props: ParentProps<'select'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**FormatTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'button'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**HiddenInput Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'input'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'label'>) => Element` | 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` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseColorPickerReturn` | Yes |  |
| `asChild` | `(props: ParentProps<'div'>) => Element` | 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` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**SwatchIndicator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | 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` | `(props: ParentProps<'div'>) => Element` | 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 |


**SwatchTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `string | Color` | Yes | The color value |
| `asChild` | `(props: ParentProps<'button'>) => Element` | 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 |


**TransparencyGrid Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `size` | `string` | No |  |


**Trigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'button'>) => Element` | 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` | `(props: ParentProps<'div'>) => Element` | 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` | `(props: ParentProps<'span'>) => Element` | 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` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


#### Vue

**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; channelSliderT...` | No | The ids of the elements in the color picker. Useful for composition. |
| `initialFocusEl` | `() => HTMLElement | null` | No | The initial focus element when the color picker is opened. |
| `inline` | `boolean` | No | Whether the color picker is inline |
| `invalid` | `boolean` | No | Whether the color picker is invalid |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `modelValue` | `Color` | No | The v-model value of the color picker |
| `name` | `string` | No | The name for the form input |
| `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 |
| `readOnly` | `boolean` | No | Whether the color picker is read-only |
| `required` | `boolean` | No | Whether the color picker is required |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |


**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 |


**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 |


**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. |
| `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 |
| `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. |


**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" |


**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. |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `ColorPickerApi<PropTypes>` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `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 |


**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 |


**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 |  |


**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. |


#### Svelte

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | 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 |
| `ref` | `Element` | No |  |
| `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 |


**AreaBackground Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**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` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |
| `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` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**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 |


**ChannelInput Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `channel` | `ExtendedColorChannel` | Yes |  |
| `asChild` | `Snippet<[PropsFn<'input'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `orientation` | `Orientation` | No |  |
| `ref` | `Element` | 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` | `Snippet<[PropsFn<'label'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**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` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `orientation` | `Orientation` | No |  |
| `ref` | `Element` | 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` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**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` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**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` | `Snippet<[PropsFn<'span'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**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` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**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" |


**Context Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `render` | `Snippet<[UseColorPickerContext]>` | Yes |  |


**Control Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**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` | `Snippet<[PropsFn<'button'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**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` | `Snippet<[PropsFn<'select'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**FormatTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'button'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**HiddenInput Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'input'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'label'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**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` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseColorPickerReturn` | Yes |  |
| `asChild` | `Snippet<[PropsFn<'div'>]>` | 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) |
| `ref` | `Element` | No |  |
| `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` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**SwatchIndicator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Swatch Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `string | Color` | Yes | The color value |
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |
| `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 |


**SwatchTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `string | Color` | Yes | The color value |
| `asChild` | `Snippet<[PropsFn<'button'>]>` | 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 |
| `ref` | `Element` | No |  |


**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 |


**TransparencyGrid Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |
| `size` | `string` | No |  |


**Trigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'button'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**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` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |
| `respectAlpha` | `boolean` | No | Whether to include the alpha channel in the color |


**ValueText Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'span'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `format` | `ColorStringFormat` | No |  |
| `ref` | `Element` | 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` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


### Context

These are the properties available when using `ColorPicker.Context`, `useColorPickerContext` hook or `useColorPicker` hook.

**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" />