Components

Color picker

Color Picker

The Color Picker is a versatile and feature-rich color selection tool for your applications. It provides support for different color spaces, user interaction, and accessibility.

API Reference

Root

Prop	Type	Default
defaultValue	string
dir	'ltr' \| 'rtl'
disabled	boolean
getRootNode	() => ShadowRoot \| Node \| Document
id	string
ids	Partial<{ content: string area: string areaGradient: string areaThumb: string channelInput(id: string): string channelSliderTrack(id: ColorChannel): string channelSliderThumb(id: ColorChannel): string }>
name	string
onValueChange	(details: ValueChangeDetails) => void
onValueChangeEnd	(details: ValueChangeDetails) => void
readOnly	boolean
value	string

Area

Prop	Type	Default
xChannel	ColorChannel
yChannel	ColorChannel
asChild	boolean

Swatch

Prop	Type	Default
value	string \| Color
asChild	boolean
readOnly	boolean

Content

Prop	Type	Default
asChild	boolean

AreaThumb

Prop	Type	Default
asChild	boolean

SwatchGroup

Prop	Type	Default
asChild	boolean

AreaGradient

Prop	Type	Default
asChild	boolean

ChannelInput

Prop	Type	Default
channel	ExtendedColorChannel
asChild	boolean
orientation	Orientation

SwatchBackground

Prop	Type	Default
asChild	boolean

EyeDropperTrigger

Prop	Type	Default
asChild	boolean

ChannelSliderThumb

Prop	Type	Default
asChild	boolean

ChannelSliderTrack

Prop	Type	Default
channel	ColorChannel
asChild	boolean
orientation	Orientation

ChannelSliderBackground

Prop	Type	Default
asChild	boolean