Selection
ColorInput
A hex text input, sized to its own value, with a live `ColorSwatch` preview that falls back to transparent while the typed text isn't a valid hex color. Optionally opens a `ColorPicker` popover, and optionally supports an alpha channel via `alpha`.
<UiColorInput />Options
One block per prop — what it does, and what it looks like set.
Model value
modelValue is the hex string, bound two-way with v-model. The swatch previews what you type live, and the field is only ever as wide as a full value needs.
Placeholder
placeholder is also what sets the field's width, which is why its default changes with alpha — an eight-digit value needs two more characters of room than a six-digit one.
Disabled
disabled disables the input.
Color picker
colorPicker turns the swatch into a trigger that opens a ColorPicker popover, for choosing a color visually instead of typing one.
Alpha
alpha accepts and emits an 8-digit hex, and adds an alpha track to the picker.
Examples
The component in real use: compositions that answer "how do I build X with this", rather than one prop at a time.
Invalid or incomplete hex
The field keeps whatever you type; the swatch falls back to transparent until the value parses.
API Reference
Generated from the component's source — props, slots and emits as the component actually declares them.
Props
stringbooleanfalsebooleanfalseEmits
update:modelValue[value: string]