{"slug":"color-picker","title":"Color Picker","description":"Using the color-picker machine in your project.","contentType":"component","framework":"react","content":"The color picker is an input widget used to select a color value from a\npredefined list or a color area.\n\nThis component builds on top of the native `<input type=color>` experience and\nprovides a more customizable and consistent user experience.\n\n## Resources\n\n\n[Latest version: v1.35.3](https://www.npmjs.com/package/@zag-js/color-picker)\n[Logic Visualizer](https://zag-visualizer.vercel.app/color-picker)\n[Source Code](https://github.com/chakra-ui/zag/tree/main/packages/machines/color-picker)\n\n\n\n**Features**\n\n- Supports custom color area\n- Supports RGBA, HSLA, HEX, HSBA, OKLAB and OKLCH formats\n- Supports channel inputs and sliders\n- Supports mouse, touch, and keyboard interactions\n- Supports form submission and reset events\n- Supports named CSS colors\n\n## Installation\n\nInstall the color picker package:\n\n```bash\nnpm install @zag-js/color-picker @zag-js/react\n# or\nyarn add @zag-js/color-picker @zag-js/react\n```\n\n## Anatomy\n\nTo set up the color picker correctly, you'll need to understand its anatomy and\nhow we name its parts.\n\n> Each part includes a `data-part` attribute to help identify them in the DOM.\n\n\n\n## Usage\n\nImport the color picker package:\n\n```jsx\nimport * as colorPicker from \"@zag-js/color-picker\"\n```\n\nThese are the key exports:\n\n- `machine` - Behavior logic for the color picker.\n- `connect` - Maps state to JSX props and event handlers.\n- `parse` - Parses a color string into a `Color` object.\n\nThen use the framework integration helpers:\n\n```jsx\nimport * as colorPicker from \"@zag-js/color-picker\"\nimport { normalizeProps, useMachine } from \"@zag-js/react\"\nimport { useId } from \"react\"\n\nfunction ColorPicker() {\n  const service = useMachine(colorPicker.machine, {\n    id: useId(),\n    defaultValue: colorPicker.parse(\"hsl(0, 100%, 50%)\"),\n  })\n\n  const api = colorPicker.connect(service, normalizeProps)\n\n  return (\n    <div {...api.getRootProps()}>\n      <label {...api.getLabelProps()}>Select Color: {api.valueAsString}</label>\n\n      <input {...api.getHiddenInputProps()} />\n\n      <div {...api.getControlProps()}>\n        <button {...api.getTriggerProps()}>\n          <div {...api.getTransparencyGridProps({ size: \"10px\" })} />\n          <div {...api.getSwatchProps({ value: api.value })} />\n        </button>\n        <input {...api.getChannelInputProps({ channel: \"hex\" })} />\n        <input {...api.getChannelInputProps({ channel: \"alpha\" })} />\n      </div>\n\n      <div {...api.getPositionerProps()}>\n        <div {...api.getContentProps()}>\n          <div {...api.getAreaProps()}>\n            <div {...api.getAreaBackgroundProps()} />\n            <div {...api.getAreaThumbProps()} />\n          </div>\n\n          <div {...api.getChannelSliderProps({ channel: \"hue\" })}>\n            <div {...api.getChannelSliderTrackProps({ channel: \"hue\" })} />\n            <div {...api.getChannelSliderThumbProps({ channel: \"hue\" })} />\n          </div>\n\n          <div {...api.getChannelSliderProps({ channel: \"alpha\" })}>\n            <div {...api.getTransparencyGridProps({ size: \"12px\" })} />\n            <div {...api.getChannelSliderTrackProps({ channel: \"alpha\" })} />\n            <div {...api.getChannelSliderThumbProps({ channel: \"alpha\" })} />\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n```\n\n### Setting the initial color\n\nSet `defaultValue` to define the initial color.\n\n```jsx\nconst [current, send] = useMachine(colorPicker.machine, {\n  defaultValue: colorPicker.parse(\"#ff0000\"),\n})\n```\n\n### Controlled color picker\n\nUse `value` and `onValueChange` to control color externally.\n\n> **Note:** We recommend preserving the value as a `Color` object rather than a\n> string to prevent calculation errors by converting back and forth.\n\n```tsx\nimport { useState } from \"react\"\nimport * as colorPicker from \"@zag-js/color-picker\"\n\nexport function ControlledColorPicker() {\n  const [value, setValue] = useState(colorPicker.parse(\"#ff0000\"))\n\n  const service = useMachine(colorPicker.machine, {\n      value,\n      onValueChange(details) {\n        setValue(details.value)\n      }\n  })\n\n  return (\n    // ...\n  )\n}\n```\n\n### Listening for change events\n\nWhen the user selects a color using the color picker, the `onValueChange` and\n`onValueChangeEnd` events will be fired.\n\n- `onValueChange` — Fires in sync as the user selects a color\n- `onValueChangeEnd` — Fires when the user stops selecting a color (useful for\n  debounced updates)\n\n```jsx\nconst [current, send] = useMachine(colorPicker.machine, {\n  onValueChange: (details) => {\n    // details => { value: Color, valueAsString: string }\n  },\n  onValueChangeEnd: (details) => {\n    // details => { value: Color, valueAsString: string }\n  },\n})\n```\n\n### Using a custom color format\n\nBy default, the color picker's output format is `rgba`. You can change this\nformat to `hsla`, `oklab`, `oklch` or `hsba` with `format`.\n\nWhen this is set, the `value` and `valueAsString` properties of the\n`onValueChange` event will be updated to reflect the new format.\n\n```jsx\nconst [current, send] = useMachine(colorPicker.machine, {\n  format: \"hsla\",\n  onValueChange: (details) => {\n    // details => { value: HSLAColor, valueAsString: string }\n  },\n})\n```\n\n### Setting the initial format\n\nUse `defaultFormat` to set the initial output format.\n\n```jsx\nconst [current, send] = useMachine(colorPicker.machine, {\n  defaultFormat: \"hsla\",\n})\n```\n\n### Controlled format\n\nUse `format` and `onFormatChange` to control the active format.\n\n```jsx\nconst [current, send] = useMachine(colorPicker.machine, {\n  format,\n  onFormatChange(details) {\n    setFormat(details.format)\n  },\n})\n```\n\n### Showing color presets\n\nAdding color presets as swatches can help users pick colors faster. To support\nthis, use the `getSwatchTriggerProps(...)` and `getSwatchProps(...)` to get the\nprops needed to render swatch buttons.\n\n```tsx {18-31}\nconst ColorPicker = () => {\n  const service = useMachine(colorPicker.machine, {\n    id: useId(),\n    defaultValue: colorPicker.parse(\"hsl(0, 100%, 50%)\"),\n  })\n\n  const api = colorPicker.connect(service, normalizeProps)\n\n  const presets = [\"#ff0000\", \"#00ff00\", \"#0000ff\"]\n\n  return (\n    <div {...api.getRootProps()}>\n      {/* ... */}\n      <div {...api.getPositionerProps()}>\n        <div {...api.getContentProps()}>\n          <div {...api.getSwatchGroupProps()}>\n            {presets.map((preset) => (\n              <button\n                key={preset}\n                {...api.getSwatchTriggerProps({ value: preset })}\n              >\n                <div style={{ position: \"relative\" }}>\n                  <div {...api.getTransparencyGridProps({ size: \"4px\" })} />\n                  <div {...api.getSwatchProps({ value: preset })} />\n                </div>\n              </button>\n            ))}\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n```\n\n### Closing after swatch selection\n\nSet `closeOnSelect` to close the popup when a swatch is selected.\n\n```jsx\nconst [current, send] = useMachine(colorPicker.machine, {\n  closeOnSelect: true,\n})\n```\n\n### Disabling the color picker\n\nSet `disabled` to `true` to disable user interaction.\n\n```jsx\nconst [current, send] = useMachine(colorPicker.machine, {\n  disabled: true,\n})\n```\n\n### Controlling the open and closed state\n\nUse `open` and `onOpenChange` to control whether the picker is visible.\n\n```jsx\nconst [current, send] = useMachine(colorPicker.machine, {\n  open: true,\n  onOpenChange: (details) => {\n    // details => { open: boolean, value: Color }\n  },\n})\n```\n\nYou can also leverage the `api.setOpen(...)` method to control the open and\nclosed state of the color picker.\n\n### Positioning the popup\n\nUse `positioning` to control popup placement and collision behavior.\n\n```jsx\nconst [current, send] = useMachine(colorPicker.machine, {\n  positioning: { placement: \"bottom-start\", gutter: 8 },\n})\n```\n\n### Setting initial focus when opened\n\nUse `initialFocusEl` to choose which element receives focus when the popup\nopens.\n\n```jsx\nconst [current, send] = useMachine(colorPicker.machine, {\n  initialFocusEl: () => document.getElementById(\"alpha-input\"),\n})\n```\n\n### Inline rendering\n\nSet `inline` to render the picker without a trigger and popup.\n\n```jsx\nconst [current, send] = useMachine(colorPicker.machine, {\n  inline: true,\n})\n```\n\n### Controlling individual color channel\n\nIn some cases, you may want to allow users to control the values of each color\nchannel individually. You can do this using an input element or a slider\nelement, or both.\n\nTo support this, use the `getChannelInputProps(...)` to show the channel inputs.\n\n> Note: Make sure you only render the channel inputs that match the `format` of\n> the color picker.\n\n```tsx {16-38}\nconst ColorPicker = () => {\n  const service = useMachine(colorPicker.machine, {\n    id: useId(),\n    defaultValue: colorPicker.parse(\"hsl(0, 100%, 50%)\"),\n  })\n\n  const api = colorPicker.connect(service, normalizeProps)\n\n  return (\n    <div {...api.getRootProps()}>\n      {/* ... */}\n      <div {...api.getPositionerProps()}>\n        <div {...api.getContentProps()}>\n          {api.format === \"rgba\" && (\n            <div>\n              <div>\n                <span>R</span>\n                <input {...api.getChannelInputProps({ channel: \"red\" })} />\n              </div>\n\n              <div>\n                <span>G</span>\n                <input {...api.getChannelInputProps({ channel: \"green\" })} />\n              </div>\n\n              <div>\n                <span>B</span>\n                <input {...api.getChannelInputProps({ channel: \"blue\" })} />\n              </div>\n\n              <div>\n                <span>A</span>\n                <input {...api.getChannelInputProps({ channel: \"alpha\" })} />\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n```\n\n### Showing a color preview\n\nTo display the value of a color, use the `getSwatchProps(...)` and pass the\ncolor value. To show the current color value, use `api.value`.\n\n```tsx {13-16}\nconst ColorPicker = () => {\n  const service = useMachine(colorPicker.machine, {\n    id: useId(),\n    defaultValue: colorPicker.parse(\"hsl(0, 100%, 50%)\"),\n  })\n\n  const api = colorPicker.connect(service, normalizeProps)\n\n  return (\n    <div {...api.getRootProps()}>\n      <div>\n        <div {...api.getTransparencyGridProps({ size: \"4px\" })} />\n        <div {...api.getSwatchProps({ value: api.value })} />\n      </div>\n      {/* ... */}\n    </div>\n  )\n}\n```\n\n> You can pass `respectAlpha: false` to show the color value without the alpha\n> channel\n\n### Adding an eyedropper\n\nThe eye dropper tool is a native browser feature that lets users pick a color\nfrom a current page's canvas. To support this, use the\n`getEyeDropperTriggerProps(...)`.\n\n> **Note:** The eye dropper tool only works in Chrome and Edge browsers\n\n```tsx {16-18}\nconst ColorPicker = () => {\n  const service = useMachine(colorPicker.machine, {\n    id: useId(),\n    defaultValue: colorPicker.parse(\"hsl(0, 100%, 50%)\"),\n  })\n\n  const api = colorPicker.connect(service, normalizeProps)\n\n  return (\n    <div {...api.getRootProps()}>\n      {/* ... */}\n      <div {...api.getPositionerProps()}>\n        <div {...api.getContentProps()}>\n          <button {...api.getEyeDropperTriggerProps()}>\n            <EyeDropIcon />\n          </button>\n        </div>\n      </div>\n    </div>\n  )\n}\n```\n\n### Usage within forms\n\nTo use the color picker in a form, set `name` and render the hidden input.\n\n```jsx {2}\nconst service = useMachine(colorPicker.machine, {\n  name: \"color-preference\",\n})\n```\n\n## Styling guide\n\nEach color picker part has a `data-part` attribute added to them to help you\nidentify and style them easily.\n\n### Open and closed state\n\nWhen the color picker is open or closed, the `data-state` attribute is added to\nthe trigger, content, control parts.\n\n```css\n[data-part=\"control\"][data-state=\"open|closed\"] {\n  /* styles for control open or state */\n}\n\n[data-part=\"trigger\"][data-state=\"open|closed\"] {\n  /* styles for control open or state */\n}\n\n[data-part=\"content\"][data-state=\"open|closed\"] {\n  /* styles for control open or state */\n}\n```\n\n### Focused State\n\nWhen the color picker is focused, the `data-focus` attribute is added to the\ncontrol and label parts.\n\n```css\n[data-part=\"control\"][data-focus] {\n  /* styles for control focus state */\n}\n\n[data-part=\"label\"][data-focus] {\n  /* styles for label focus state */\n}\n```\n\n### Disabled State\n\nWhen the color picker is disabled, the `data-disabled` attribute is added to the\nlabel, control, trigger and option parts.\n\n```css\n[data-part=\"label\"][data-disabled] {\n  /* styles for label disabled state */\n}\n\n[data-part=\"control\"][data-disabled] {\n  /* styles for control disabled state */\n}\n\n[data-part=\"trigger\"][data-disabled] {\n  /* styles for trigger disabled state */\n}\n\n[data-part=\"swatch-trigger\"][data-disabled] {\n  /* styles for item disabled state */\n}\n```\n\n### Swatch State\n\nWhen a swatch's color value matches the color picker's value, the\n`data-state=checked` attribute is added to the swatch part.\n\n```css\n[data-part=\"swatch-trigger\"][data-state=\"checked|unchecked\"] {\n  /* styles for swatch's checked state */\n}\n```\n\n## Methods and Properties\n\n### Machine Context\n\nThe color picker machine exposes the following context properties:\n\n**`ids`**\nType: `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; channelSliderThumb: (id: ColorChannel) => string; }>`\nDescription: The ids of the elements in the color picker. Useful for composition.\n\n**`value`**\nType: `Color`\nDescription: The controlled color value of the color picker\n\n**`defaultValue`**\nType: `Color`\nDescription: The initial color value when rendered.\nUse when you don't need to control the color value of the color picker.\n\n**`disabled`**\nType: `boolean`\nDescription: Whether the color picker is disabled\n\n**`readOnly`**\nType: `boolean`\nDescription: Whether the color picker is read-only\n\n**`required`**\nType: `boolean`\nDescription: Whether the color picker is required\n\n**`invalid`**\nType: `boolean`\nDescription: Whether the color picker is invalid\n\n**`onValueChange`**\nType: `(details: ValueChangeDetails) => void`\nDescription: Handler that is called when the value changes, as the user drags.\n\n**`onValueChangeEnd`**\nType: `(details: ValueChangeDetails) => void`\nDescription: Handler that is called when the user stops dragging.\n\n**`onOpenChange`**\nType: `(details: OpenChangeDetails) => void`\nDescription: Handler that is called when the user opens or closes the color picker.\n\n**`name`**\nType: `string`\nDescription: The name for the form input\n\n**`positioning`**\nType: `PositioningOptions`\nDescription: The positioning options for the color picker\n\n**`initialFocusEl`**\nType: `() => HTMLElement`\nDescription: The initial focus element when the color picker is opened.\n\n**`open`**\nType: `boolean`\nDescription: The controlled open state of the color picker\n\n**`defaultOpen`**\nType: `boolean`\nDescription: The initial open state of the color picker when rendered.\nUse when you don't need to control the open state of the color picker.\n\n**`format`**\nType: `ColorFormat`\nDescription: The controlled color format to use\n\n**`defaultFormat`**\nType: `ColorFormat`\nDescription: The initial color format when rendered.\nUse when you don't need to control the color format of the color picker.\n\n**`onFormatChange`**\nType: `(details: FormatChangeDetails) => void`\nDescription: Function called when the color format changes\n\n**`closeOnSelect`**\nType: `boolean`\nDescription: Whether to close the color picker when a swatch is selected\n\n**`openAutoFocus`**\nType: `boolean`\nDescription: Whether to auto focus the color picker when it is opened\n\n**`inline`**\nType: `boolean`\nDescription: Whether to render the color picker inline\n\n**`id`**\nType: `string`\nDescription: The unique identifier of the machine.\n\n**`getRootNode`**\nType: `() => Node | ShadowRoot | Document`\nDescription: A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.\n\n**`dir`**\nType: `\"ltr\" | \"rtl\"`\nDescription: The document's text/writing direction.\n\n**`onPointerDownOutside`**\nType: `(event: PointerDownOutsideEvent) => void`\nDescription: Function called when the pointer is pressed down outside the component\n\n**`onFocusOutside`**\nType: `(event: FocusOutsideEvent) => void`\nDescription: Function called when the focus is moved outside the component\n\n**`onInteractOutside`**\nType: `(event: InteractOutsideEvent) => void`\nDescription: Function called when an interaction happens outside the component\n\n### Machine API\n\nThe color picker `api` exposes the following methods:\n\n**`dragging`**\nType: `boolean`\nDescription: Whether the color picker is being dragged\n\n**`open`**\nType: `boolean`\nDescription: Whether the color picker is open\n\n**`inline`**\nType: `boolean`\nDescription: Whether the color picker is rendered inline\n\n**`value`**\nType: `Color`\nDescription: The current color value (as a string)\n\n**`valueAsString`**\nType: `string`\nDescription: The current color value (as a Color object)\n\n**`setValue`**\nType: `(value: string | Color) => void`\nDescription: Function to set the color value\n\n**`getChannelValue`**\nType: `(channel: ColorChannel) => string`\nDescription: Function to set the color value\n\n**`getChannelValueText`**\nType: `(channel: ColorChannel, locale: string) => string`\nDescription: Function to get the formatted and localized value of a specific channel\n\n**`setChannelValue`**\nType: `(channel: ColorChannel, value: number) => void`\nDescription: Function to set the color value of a specific channel\n\n**`format`**\nType: `ColorFormat`\nDescription: The current color format\n\n**`setFormat`**\nType: `(format: ColorFormat) => void`\nDescription: Function to set the color format\n\n**`alpha`**\nType: `number`\nDescription: The alpha value of the color\n\n**`setAlpha`**\nType: `(value: number) => void`\nDescription: Function to set the color alpha\n\n**`setOpen`**\nType: `(open: boolean) => void`\nDescription: Function to open or close the color picker\n\n### Data Attributes\n\n**`Root`**\n\n**`data-scope`**: color-picker\n**`data-part`**: root\n**`data-disabled`**: Present when disabled\n**`data-readonly`**: Present when read-only\n**`data-invalid`**: Present when invalid\n\n**`Label`**\n\n**`data-scope`**: color-picker\n**`data-part`**: label\n**`data-disabled`**: Present when disabled\n**`data-readonly`**: Present when read-only\n**`data-invalid`**: Present when invalid\n**`data-required`**: Present when required\n**`data-focus`**: Present when focused\n\n**`Control`**\n\n**`data-scope`**: color-picker\n**`data-part`**: control\n**`data-disabled`**: Present when disabled\n**`data-readonly`**: Present when read-only\n**`data-invalid`**: Present when invalid\n**`data-state`**: \"open\" | \"closed\"\n**`data-focus`**: Present when focused\n\n**`Trigger`**\n\n**`data-scope`**: color-picker\n**`data-part`**: trigger\n**`data-disabled`**: Present when disabled\n**`data-readonly`**: Present when read-only\n**`data-invalid`**: Present when invalid\n**`data-placement`**: The placement of the trigger\n**`data-state`**: \"open\" | \"closed\"\n**`data-focus`**: Present when focused\n\n**`Content`**\n\n**`data-scope`**: color-picker\n**`data-part`**: content\n**`data-placement`**: The placement of the content\n**`data-nested`**: popover\n**`data-has-nested`**: popover\n**`data-state`**: \"open\" | \"closed\"\n\n**`ValueText`**\n\n**`data-scope`**: color-picker\n**`data-part`**: value-text\n**`data-disabled`**: Present when disabled\n**`data-focus`**: Present when focused\n\n**`Area`**\n\n**`data-scope`**: color-picker\n**`data-part`**: area\n**`data-invalid`**: Present when invalid\n**`data-disabled`**: Present when disabled\n**`data-readonly`**: Present when read-only\n\n**`AreaBackground`**\n\n**`data-scope`**: color-picker\n**`data-part`**: area-background\n**`data-invalid`**: Present when invalid\n**`data-disabled`**: Present when disabled\n**`data-readonly`**: Present when read-only\n\n**`AreaThumb`**\n\n**`data-scope`**: color-picker\n**`data-part`**: area-thumb\n**`data-disabled`**: Present when disabled\n**`data-invalid`**: Present when invalid\n**`data-readonly`**: Present when read-only\n\n**`ChannelSlider`**\n\n**`data-scope`**: color-picker\n**`data-part`**: channel-slider\n**`data-channel`**: The color channel of the channelslider\n**`data-orientation`**: The orientation of the channelslider\n\n**`ChannelSliderTrack`**\n\n**`data-scope`**: color-picker\n**`data-part`**: channel-slider-track\n**`data-channel`**: The color channel of the channelslidertrack\n**`data-orientation`**: The orientation of the channelslidertrack\n\n**`ChannelSliderLabel`**\n\n**`data-scope`**: color-picker\n**`data-part`**: channel-slider-label\n**`data-channel`**: The color channel of the channelsliderlabel\n\n**`ChannelSliderValueText`**\n\n**`data-scope`**: color-picker\n**`data-part`**: channel-slider-value-text\n**`data-channel`**: The color channel of the channelslidervaluetext\n\n**`ChannelSliderThumb`**\n\n**`data-scope`**: color-picker\n**`data-part`**: channel-slider-thumb\n**`data-channel`**: The color channel of the channelsliderthumb\n**`data-disabled`**: Present when disabled\n**`data-orientation`**: The orientation of the channelsliderthumb\n\n**`ChannelInput`**\n\n**`data-scope`**: color-picker\n**`data-part`**: channel-input\n**`data-channel`**: The color channel of the channelinput\n**`data-disabled`**: Present when disabled\n**`data-invalid`**: Present when invalid\n**`data-readonly`**: Present when read-only\n\n**`EyeDropperTrigger`**\n\n**`data-scope`**: color-picker\n**`data-part`**: eye-dropper-trigger\n**`data-disabled`**: Present when disabled\n**`data-invalid`**: Present when invalid\n**`data-readonly`**: Present when read-only\n\n**`SwatchTrigger`**\n\n**`data-scope`**: color-picker\n**`data-part`**: swatch-trigger\n**`data-state`**: \"checked\" | \"unchecked\"\n**`data-value`**: The value of the item\n**`data-disabled`**: Present when disabled\n\n**`Swatch`**\n\n**`data-scope`**: color-picker\n**`data-part`**: swatch\n**`data-state`**: \"checked\" | \"unchecked\"\n**`data-value`**: The value of the item\n\n### CSS Variables\n\n<CssVarTable name=\"color-picker\" />\n\n## Accessibility\n\n### Keyboard Interactions\n\n**`Enter`**\nDescription: <span>When focus is on the trigger, opens the color picker<br />When focus is on a trigger of a swatch, selects the color (and closes the color picker)<br />When focus is on the input or channel inputs, selects the color</span>\n\n**`ArrowLeft`**\nDescription: <span>When focus is on the color area, decreases the hue value of the color<br />When focus is on the channel sliders, decreases the value of the channel</span>\n\n**`ArrowRight`**\nDescription: <span>When focus is on the color area, increases the hue value of the color<br />When focus is on the channel sliders, increases the value of the channel</span>\n\n**`ArrowUp`**\nDescription: <span>When focus is on the color area, increases the saturation value of the color<br />When focus is on the channel sliders, increases the value of the channel</span>\n\n**`ArrowDown`**\nDescription: <span>When focus is on the color area, decreases the saturation value of the color<br />When focus is on the channel sliders, decreases the value of the channel</span>\n\n**`Esc`**\nDescription: Closes the color picker and moves focus to the trigger","package":"@zag-js/color-picker","editUrl":"https://github.com/chakra-ui/zag/edit/main/website/data/components/color-picker.mdx"}