---
id: color-picker
title: Color Picker
description: A component that allows users to select a color from a color picker.
---

<ComponentPreview id="ColorPicker" />

## Anatomy

<Anatomy id="color-picker" />

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

## Examples

<Example id="basic" />

### Controlled

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

<Example id="controlled" />

### Open Controlled

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

<Example id="open-controlled" />

### Root Provider

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

<Example id="root-provider" />

### Disabled

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

<Example id="disabled" />

### Inline

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

<Example id="inline" />

### Input Only

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

<Example id="input-only" />

### Slider Only

Display only the channel sliders for RGB color selection.

<Example id="slider-only" />

### Swatch Only

A simple color picker with only preset color swatches.

<Example id="swatch-only" />

### Swatches

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

<Example id="swatches" />

### Value Swatch

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

<Example id="value-swatch" />

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

### Form Usage

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

<Example id="form-usage" />

### Inside Dialog

Here's an example of how to use the color picker inside a dialog.

<Example id="inside-dialog" />

## API Reference

### Props

<ComponentTypes id="color-picker" />

### Context

<ContextType id="color-picker" />

## Accessibility

### Keyboard Support

<KeyBindingsTable id="color-picker" />
