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 />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.
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]