Color Picker

A component that allows users to select a color from a spectrum or predefined swatches.

Usage

A feature-rich compound component that provides a complete interface for color selection, including color areas, sliders, and swatches.

import {
  ColorPicker,
  Swatch,
  Surface,
  Portal,
  parseColor,
} from "@elemnts-ui/react";

const color = parseColor("#eb5e41");

<ColorPicker defaultValue={color}>
  <ColorPicker.Control>
    <ColorPicker.Trigger>
      <ColorPicker.ValueSwatch asChild>
        <Swatch size="sm" />
      </ColorPicker.ValueSwatch>
    </ColorPicker.Trigger>
  </ColorPicker.Control>
  <Portal>
    <ColorPicker.Positioner>
      <ColorPicker.Content>
        <Surface p="8">
          <ColorPicker.Area>
            <ColorPicker.AreaBackground>
              <ColorPicker.AreaThumb />
            </ColorPicker.AreaBackground>
          </ColorPicker.Area>
          <ColorPicker.ChannelSlider channel="hue">
            <ColorPicker.ChannelSliderTrack>
              <ColorPicker.ChannelSliderThumb />
            </ColorPicker.ChannelSliderTrack>
          </ColorPicker.ChannelSlider>
        </Surface>
      </ColorPicker.Content>
    </ColorPicker.Positioner>
  </Portal>
</ColorPicker>;

Swatch Grid

Use the ColorPicker.SwatchGroup to provide a list of predefined colors for the user to choose from.

Area Channels

Remap the color area to different channels using the xChannel and yChannel props.

Alpha Slider

Use the alpha channel with a ColorPicker.TransparencyGrid to allow users to adjust the opacity of a color.

RGB Channel Sliders

Display multiple channel sliders within a ColorPicker.View to allow explicit editing of each color channel.

API Reference

ColorPicker

Root element for the color picker.

Prop	Type	Default
closeOnSelect	`boolean`	`false`
defaultFormat	`ColorFormat`	`"rgba"`
defaultOpen	`boolean`	-
defaultValue	`Color`	`#000000`
disabled	`boolean`	-
format	`ColorFormat`	-
hideMode	`HideMode`	`"display-none"`
id	`string`	-
ids	`Partial<ColorPickerIds>`	-
immediate	`boolean`	-
initialFocusEl	`() => HTMLElement \| null`	-
inline	`boolean`	-
invalid	`boolean`	-
lazyMount	`boolean`	`false`
name	`string`	-
onExitComplete	`VoidFunction`	-
onFocusOutside	`(event: FocusOutsideEvent) => void`	-
onFormatChange	`(details: FormatChangeDetails) => void`	-
onInteractOutside	`(event: InteractOutsideEvent) => void`	-
onOpenChange	`(details: OpenChangeDetails) => void`	-
onPointerDownOutside	`(event: PointerDownOutsideEvent) => void`	-
onValueChange	`(details: ValueChangeDetails) => void`	-
onValueChangeEnd	`(details: ValueChangeDetails) => void`	-
open	`boolean`	-
openAutoFocus	`boolean`	`true`
positioning	`PositioningOptions`	-
present	`boolean`	-
readOnly	`boolean`	-
required	`boolean`	-
skipAnimationOnMount	`boolean`	`false`
unmountOnExit	`boolean`	`false`
value	`Color`	-
asChild	`boolean`	`false`

ColorPickerRootProvider

Provides a color picker state machine created with useColorPicker.

Prop	Type	Default
value	`UseColorPickerReturn`	required
hideMode	`HideMode`	`"display-none"`
immediate	`boolean`	-
lazyMount	`boolean`	`false`
onExitComplete	`VoidFunction`	-
present	`boolean`	-
skipAnimationOnMount	`boolean`	`false`
unmountOnExit	`boolean`	`false`
asChild	`boolean`	`false`

ColorPickerArea

Interactive color area for selecting two color channels.

Prop	Type	Default
xChannel	`ColorChannel`	-
yChannel	`ColorChannel`	-
asChild	`boolean`	`false`

ColorPickerAreaBackground

Renders the gradient background for the color area.

Prop	Type	Default
asChild	`boolean`	`false`

ColorPickerAreaThumb

Renders the draggable thumb within the color area.

Prop	Type	Default
asChild	`boolean`	`false`

ColorPickerChannelSlider

A slider for selecting a color channel value.

Prop	Type	Default
channel	`ColorChannel`	required
orientation	`Orientation`	-
asChild	`boolean`	`false`

ColorPickerChannelSliderControl

Wraps the channel slider track and thumb.

Prop	Type	Default
asChild	`boolean`	`false`

ColorPickerChannelSliderLabel

Labels a channel slider.

Prop	Type	Default
asChild	`boolean`	`false`

ColorPickerChannelSliderThumb

Renders the draggable thumb for a channel slider.

Prop	Type	Default
asChild	`boolean`	`false`

ColorPickerChannelSliderTrack

Renders the track for a channel slider.

Prop	Type	Default
asChild	`boolean`	`false`

ColorPickerChannelSliderValueText

Displays the current channel slider value.

Prop	Type	Default
asChild	`boolean`	`false`

ColorPickerChannelInput

An input for editing an individual color channel.

Prop	Type	Default
channel	`ExtendedColorChannel`	required
orientation	`Orientation`	-
asChild	`boolean`	`false`

ColorPickerContent

Contains the picker interface displayed when the picker is open.

Prop	Type	Default
asChild	`boolean`	`false`

ColorPickerControl

Groups the trigger and color value controls.

Prop	Type	Default
asChild	`boolean`	`false`

ColorPickerEyeDropperTrigger

A button that opens the browser eye dropper, where supported.

Prop	Type	Default
asChild	`boolean`	`false`

ColorPickerFormatSelect

A native select for changing the color format.

Prop	Type	Default
asChild	`boolean`	`false`

ColorPickerFormatTrigger

A button that cycles through available color formats.

Prop	Type	Default
asChild	`boolean`	`false`

ColorPickerHiddenInput

A hidden form input containing the selected color value.

Prop	Type	Default
asChild	`boolean`	`false`

ColorPickerLabel

Labels the color picker.

Prop	Type	Default
asChild	`boolean`	`false`

ColorPickerPositioner

Positions the color picker content relative to its trigger.

Prop	Type	Default
asChild	`boolean`	`false`

ColorPickerSwatch

Displays a color swatch.

Prop	Type	Default
value	`string \| Color`	required
respectAlpha	`boolean`	-
asChild	`boolean`	`false`

ColorPickerSwatchGroup

Groups related color swatches.

Prop	Type	Default
asChild	`boolean`	`false`

ColorPickerSwatchIndicator

Indicates the selected swatch.

Prop	Type	Default
asChild	`boolean`	`false`

ColorPickerSwatchTrigger

A button that selects its associated swatch color.

Prop	Type	Default
value	`string \| Color`	required
disabled	`boolean`	-
asChild	`boolean`	`false`

ColorPickerTransparencyGrid

Renders a checkerboard background for transparent colors.

Prop	Type	Default
size	`string`	-
asChild	`boolean`	`false`

ColorPickerTrigger

A button that toggles the color picker.

Prop	Type	Default
asChild	`boolean`	`false`

ColorPickerValueSwatch

Displays a swatch for the current color value.

Prop	Type	Default
respectAlpha	`boolean`	-
asChild	`boolean`	`false`

ColorPickerValueText

Displays the current color value as text.

Prop	Type	Default
format	`ColorStringFormat`	-
asChild	`boolean`	`false`

ColorPickerView

Renders content for a specific color format.

Prop	Type	Default
format	`ColorFormat`	required
asChild	`boolean`	`false`