Selection

ColorPicker

A hue/saturation/lightness picker over a hex `v-model`, with an optional alpha track for an 8-digit hex and a `ColorSwatch` + hex code preview of the current selection.

vue

<UiColorPicker />

Options

One block per prop — what it does, and what it looks like set.

Model value

modelValue is the selected colour, bound two-way with v-model. The picker shows its own ColorSwatch and hex preview of whatever it currently holds.

#ff0000

Default value

defaultValue is the starting color when the picker manages its own state.

#ff0000

Alpha

alpha adds an alpha track and emits an 8-digit hex. The preview swatch shows the transparency too, over a checkerboard.

#ff0000ff

Disabled

disabled disables pointer interaction with the saturation/brightness selector and the hue/alpha tracks.

#ff0000

API Reference

Generated from the component's source — props, slots and emits as the component actually declares them.

Props

Prop

Type

Default

Description

modelValue

string

—

The selected color as a hex string, for two-way binding with v-model. An 8-digit hex (`#rrggbbaa`) when `alpha` is enabled and the color isn't fully opaque.

defaultValue

string

'#ff0000'

Initial color used when `modelValue` is not provided.

alpha

boolean

false

Adds an alpha/opacity track alongside hue, emitting an 8-digit hex (`#rrggbbaa`) instead of 6.

disabled

boolean

false

Disables pointer interaction with the saturation/brightness selector and the hue/alpha tracks.

Emits

Event

Payload

Description

update:modelValue

[value: string]

—