Reference

Color Picker

ColorPicker, dressed in the paper-and-ink system: a seal-sized swatch on the paper, opening into an area and channel sliders where pigment is picked. The parts — Root, Label, Control, Trigger, Positioner, Content, Area, AreaThumb, AreaBackground, ValueText, ValueSwatch, ChannelSlider, ChannelSliderLabel, ChannelSliderTrack, ChannelSliderThumb, ChannelSliderValueText, ChannelInput, TransparencyGrid, SwatchGroup, SwatchTrigger, SwatchIndicator, Swatch, EyeDropperTrigger, FormatTrigger, FormatSelect, HiddenInput, Context.

Root · Label · Control · Trigger · Positioner · Content · Area · AreaThumb · ValueText · AreaBackground · ChannelSlider · ChannelSliderLabel · ChannelSliderTrack · ChannelSliderThumb · ChannelSliderValueText · ChannelInput · TransparencyGrid · SwatchGroup · SwatchTrigger · SwatchIndicator · Swatch · EyeDropperTrigger · FormatTrigger · FormatSelect

#AreaBackground

A styled part — no props of its own; it takes the anatomy's shared styling.

#AreaThumb

A styled part — no props of its own; it takes the anatomy's shared styling.

#Area

Prop	Type	Default	Description
`xChannel`	`ColorChannel \| undefined`		—
`yChannel`	`ColorChannel \| undefined`		—

#ChannelInput

Prop	Type	Default	Description
`channel`	`ExtendedColorChannel`		—
`orientation`	`Orientation \| undefined`		—

#ChannelSliderLabel

A styled part — no props of its own; it takes the anatomy's shared styling.

#ChannelSliderThumb

A styled part — no props of its own; it takes the anatomy's shared styling.

#ChannelSliderTrack

A styled part — no props of its own; it takes the anatomy's shared styling.

#ChannelSliderValueText

A styled part — no props of its own; it takes the anatomy's shared styling.

#ChannelSlider

Prop	Type	Default	Description
`channel`	`ColorChannel`		—
`orientation`	`Orientation \| undefined`		—

#Content

A styled part — no props of its own; it takes the anatomy's shared styling.

#Control

A styled part — no props of its own; it takes the anatomy's shared styling.

#EyeDropperTrigger

A styled part — no props of its own; it takes the anatomy's shared styling.

#FormatSelect

A styled part — no props of its own; it takes the anatomy's shared styling.

#FormatTrigger

A styled part — no props of its own; it takes the anatomy's shared styling.

#HiddenInput

A styled part — no props of its own; it takes the anatomy's shared styling.

#Label

A styled part — no props of its own; it takes the anatomy's shared styling.

#Positioner

A styled part — no props of its own; it takes the anatomy's shared styling.

#Root

Prop	Type	Default	Description
`size`	`String as PropType<"sm" \| "md" \| "lg">`	`"md"`	One rung of the control-height ladder for the swatch seal.
`closeOnSelect`	`boolean`	`false`	Whether to close the color picker when a swatch is selected
`defaultFormat`	`colorPicker.ColorFormat`	`"rgba"`	The initial color format when rendered. Use when you don't need to control the color format of the color picker.
`defaultOpen`	`boolean`		The initial open state of the color picker when rendered. Use when you don't need to control the open state of the color picker.
`defaultValue`	`colorPicker.Color`	`#000000`	The initial color value when rendered. Use when you don't need to control the color value of the color picker.
`disabled`	`boolean`		Whether the color picker is disabled
`format`	`colorPicker.ColorFormat`		The controlled color format to use
`id`	`string`		The unique identifier of the machine.
`ids`	`Partial<{ root: string; control: string; trigger: string; label: string; input: string; hiddenInput: string; content: string; area: string; areaGradient: string; positioner: string; formatSelect: string; areaThumb: string; channelInput(id: string): string; channelSliderTrack(id: colorPicker.ColorChannel): string; channelSliderThumb(id: colorPicker.ColorChannel): string; }>`		The ids of the elements in the color picker. Useful for composition.
`initialFocusEl`	`() => HTMLElement \| null`		The initial focus element when the color picker is opened.
`inline`	`boolean`		Whether the color picker is inline
`invalid`	`boolean`		Whether the color picker is invalid
`modelValue`	`colorPicker.Color`		The v-model value of the color picker
`name`	`string`		The name for the form input
`open`	`boolean`		The controlled open state of the color picker
`openAutoFocus`	`boolean`	`true`	Whether to auto focus the color picker when it is opened
`positioning`	`colorPicker.PositioningOptions`		The positioning options for the color picker
`readOnly`	`boolean`		Whether the color picker is read-only
`required`	`boolean`		Whether the color picker is required

Event	Payload
`exitComplete`	`—`
`valueChange`	`details: ValueChangeDetails`
`update:modelValue`	`value: Color`
`openChange`	`details: OpenChangeDetails`
`update:open`	`open: boolean`
`valueChangeEnd`	`details: ValueChangeDetails`
`focusOutside`	`event: FocusOutsideEvent`
`formatChange`	`details: FormatChangeDetails`
`interactOutside`	`event: InteractOutsideEvent`
`pointerDownOutside`	`event: PointerDownOutsideEvent`
`update:format`	`format: ColorFormat`

#SwatchGroup

A styled part — no props of its own; it takes the anatomy's shared styling.

#SwatchIndicator

A styled part — no props of its own; it takes the anatomy's shared styling.

#SwatchTrigger

Prop	Type	Default	Description
`disabled`	`boolean \| undefined`		Whether the swatch trigger is disabled
`value`	`string \| Color`		The color value

#Swatch

Prop	Type	Default	Description
`respectAlpha`	`boolean \| undefined`		Whether to include the alpha channel in the color
`value`	`string \| Color`		The color value

#TransparencyGrid

Prop	Type	Default	Description
`size`	`string \| undefined`		—

#Trigger

A styled part — no props of its own; it takes the anatomy's shared styling.

#ValueSwatch

A styled part — no props of its own; it takes the anatomy's shared styling.

#ValueText

Prop	Type	Default	Description
`format`	`ColorStringFormat`		—

#View

Prop	Type	Default	Description
`format`	`ColorFormat`		—