Color Picker inputoverlay

Color selection with swatches, eyedropper, HSLA/hex input, and popover panel.

API Reference

<ColorPicker>

Prop	Type	Default
open	—	`false`
value	string \| undefined	`$bindable()`
defaultValue	string \| undefined	required
format	ColorPickerFormat \| undefined	`$bindable()`
closeWatcherAndroidOnly	boolean \| undefined	`true`
beforeClose	(() => void) \| undefined	required
onOpenChange	—	required
onValueChange	—	required
onValueSubmit	—	required
onFormatChange	((format: ColorPickerFormat) => void) \| undefined	required
class	string	required
children	Snippet	required
positioning	—	required
modal	boolean	`true`

<ColorPicker.Area>

Prop	Type	Default
class	string	required
children	Snippet	required

<ColorPicker.AreaBackground>

Prop	Type	Default
class	string	required

<ColorPicker.AreaThumb>

Prop	Type	Default
class	string	required
children	Snippet	required

<ColorPicker.ChannelInput>

Prop	Type	Default
channel	ColorPickerChannel `huesaturationlightnessbrightnessredgreenbluealpha`	required
size	InputSize \| number	`'default'`
htmlSize	number	`undefined`
class	string	required

<ColorPicker.ChannelRows>

Prop	Type	Default
getChannelLabel	(channel: string) => string	required
class	ClassValue	required

<ColorPicker.ChannelSlider>

Prop	Type	Default
channel	ColorPickerChannel `huesaturationlightnessbrightnessredgreenbluealpha`	required
class	string	required
children	Snippet	required

<ColorPicker.ChannelSliderRange>

Prop	Type	Default
class	string	required

<ColorPicker.ChannelSliderThumb>

Prop	Type	Default
class	string	required
children	Snippet	required

<ColorPicker.ChannelSliderTrack>

Prop	Type	Default
class	string	required
children	Snippet	required

<ColorPicker.ChannelSliders>

Prop	Type	Default
class	ClassValue	required

<ColorPicker.Content>

Prop	Type	Default
class	string	required
children	Snippet	required

<ColorPicker.Control>

Prop	Type	Default
class	string	required
children	Snippet	required

<ColorPicker.Editor>

Prop	Type	Default
getChannelLabel	(channel: string) => string	required
formatLabel	—	required
hexLabel	—	required
eyeDropperLabel	—	required
areaLabel	—	required
eyeDropperIcon	—	required
class	string	required

<ColorPicker.EyeDropperTrigger>

Prop	Type	Default
class	string	required
asChild	—	required
children	Snippet	required

<ColorPicker.FormatSelect>

Prop	Type	Default
class	string	required

<ColorPicker.FormatTrigger>

Prop	Type	Default
class	string	required
asChild	—	required
children	Snippet	required

<ColorPicker.Positioner>

Prop	Type	Default
class	string	required
children	Snippet	required

<ColorPicker.Swatch>

Prop	Type	Default
class	string	required
children	Snippet	required

<ColorPicker.SwatchGroup>

Prop	Type	Default
class	string	required
children	Snippet	required

<ColorPicker.SwatchIndicator>

Prop	Type	Default
class	string	required
children	Snippet	required

<ColorPicker.SwatchTrigger>

Prop	Type	Default
class	string	required
asChild	—	required
children	Snippet	required

<ColorPicker.TransparencyGrid>

Prop	Type	Default
class	string	required

<ColorPicker.Trigger>

Prop	Type	Default
size	ButtonSize `xssmdefaultlgxlicon-xsicon-smiconicon-lgicon-xl`	`'default'`
variant	ButtonVariant `defaultoutlinesecondaryghostdestructivedestructive-secondarydestructive-outlinelink`	`'outline'`
value	string	required
showValue	boolean	`false`
class	ClassValue	required

<ColorPicker.ValueSwatch>

Prop	Type	Default
class	string	required
children	Snippet	required

<ColorPicker.ValueText>

Prop	Type	Default
class	string	required
children	Snippet	required

<ColorPicker.View>

Prop	Type	Default
class	string	required
children	Snippet	required

Color Picker inputoverlay

API Reference

Feedback for components-color-picker

About ploss