Color Swatches

Interactive documentation for the color swatches group component. Change props in the playground, inspect sizes and availability states, and copy the generated example.

Preview

Selected color

—

Code

<ColorSwatchesGroup
  v-model="selectedColor"
  :colors="colors"
/>

Sizes

Examples for supported swatch group sizes.

Size M

Selected: —

Size L

Selected: —

Availability

Unavailable colors are rendered by the nested ColorSwatch component using the isAvailable flag.

Available

Selected: —

Mixed availability

Selected: —

Props

This table matches the current ColorSwatchesGroupProps interface.

Prop	Type	Required	Default	Description
modelValue	ColorValue \| null	Required	null	Currently selected color value. Supports single colors and gradient arrays through v-model binding.
string	ColorValue option	—	—	Single solid color value like `#0EA5E9`.
[string, string]	ColorValue option	—	—	Two-color split swatch value rendered as two halves.
colors	ColorItem[]	Required	[]	Array of color options rendered by the group. Each item contains a value and optional availability state.
value	ColorValue	Required	—	Color or split-color value rendered inside the swatch.
isAvailable	boolean	Optional	—	Controls unavailable state with cross overlay styling.
size	'm' \| 'l'	Optional	undefined	Controls the size of all nested ColorSwatch items inside the group. ColorSwatch itself falls back to size="m".
disabled	boolean	Optional	false	Disables all interactions and applies reduced opacity styles to the entire group.