Selection
ColorSwatchPicker
A row of hex color swatches to pick a single value from, sharing a `v-model` like a radio group.
vue
<UiColorSwatchPicker :items="..." />Options
One block per prop — what it does, and what it looks like set.
Items
requireditems is the palette to choose from, as hex strings. Each renders as a ColorSwatch.
Model value
modelValue is the chosen colour — bind it with v-model to own the selection. Leave it off and the picker tracks its own, starting from defaultValue.
Selected: #22c55e
Default value
defaultValue sets which swatch starts selected when the picker manages its own state.
Disabled
disabled disables every swatch at once.
API Reference
Generated from the component's source — props, slots and emits as the component actually declares them.
Props
Prop
Type
Default
Description
string—
Controls the selected color. Omit this to let the picker manage its own state internally (starting from `defaultValue`); pass it to fully control the selection yourself.
Emits
Event
Payload
Description
update:modelValue[value: string]—