Color Picker

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

Preview Component

Please note, the API of this component is currently in a preview phase and is subject to change.

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.

Examples

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

Controlled Color Picker

To create a controlled Color Picker component, manage the state of the current color using the value prop and update it when the onValueChange or onValueChangeEnd event handler is called:

API Reference

Area

PropTypeDefault
asChild
boolean
xChannel
ColorChannel
yChannel
ColorChannel

Root

PropTypeDefault
asChild
boolean
closeOnSelect
boolean
defaultValue
string
dir
'ltr' | 'rtl'
disabled
boolean
format
ColorFormat
getRootNode
() => ShadowRoot | Node | Document
id
string
ids
Partial<{ root: string control: string trigger: string label: string input: string content: string area: string areaGradient: string areaThumb: string channelInput(id: string): string channelSliderTrack(id: ColorChannel): string channelSliderThumb(id: ColorChannel): string }>
initialFocusEl
HTMLElement | (() => MaybeElement)
lazyMount
booleanfalse
name
string
onExitComplete
() => void
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
positioning
PositioningOptions
present
boolean
readOnly
boolean
unmountOnExit
booleanfalse
value
string

View

PropTypeDefault
format
ColorFormat
asChild
boolean

Label

PropTypeDefault
asChild
boolean

Swatch

PropTypeDefault
value
string | Color
asChild
boolean
respectAlpha
boolean

Content

PropTypeDefault
asChild
boolean

Control

PropTypeDefault
asChild
boolean

Trigger

PropTypeDefault
asChild
boolean

AreaThumb

PropTypeDefault
asChild
boolean

ValueText

PropTypeDefault
asChild
boolean

Positioner

PropTypeDefault
asChild
boolean

SwatchGroup

PropTypeDefault
asChild
boolean

ChannelInput

PropTypeDefault
channel
ExtendedColorChannel
asChild
boolean
orientation
Orientation

FormatSelect

PropTypeDefault
asChild
boolean

ChannelSlider

PropTypeDefault
channel
ColorChannel
asChild
boolean
orientation
Orientation

FormatTrigger

PropTypeDefault
asChild
boolean

SwatchTrigger

PropTypeDefault
value
string | Color
asChild
boolean
disabled
boolean

AreaBackground

PropTypeDefault
asChild
boolean

SwatchIndicator

PropTypeDefault
asChild
boolean

TransparencyGrid

PropTypeDefault
asChild
boolean
size
string

EyeDropperTrigger

PropTypeDefault
asChild
boolean

ChannelSliderThumb

PropTypeDefault
asChild
boolean

ChannelSliderTrack

PropTypeDefault
asChild
boolean