Forms
ColorSwatch
A single color swatch with a checkmark when `selected` and a checkerboard behind translucent colors — purely presentational, so a parent like `ColorSwatchPicker` owns the actual selection and listens for a click. Also usable standalone with a custom `icon`, or as a plain non-interactive preview by leaving `selected` unbound.
<UiColorSwatch :color="..." />Color
requiredcolor is any CSS colour — a hex, a named colour, a custom property. The swatch only paints it; the parent owns selection and listens for a plain click.
ColorSwatch never tracks its own selection
`selected` is purely one-way — clicking a swatch does nothing by itself. ColorSwatchPicker (and the example above) listens for the click and decides what becomes selected.
Selected
selected is what makes the swatch interactive at all. Binding it gives a pointer cursor, keyboard focus and click handling; leaving it off gives a plain, inert colour preview.
Disabled
disabled disables interaction with the swatch.
Icon
icon is shown while the swatch is unselected, as a hint that it can be clicked. A checkmark always wins once selected is true, so the icon never fights the selected state.
Translucent colors
A checkerboard shows through behind any alpha, so a nearly-transparent color still reads as a color rather than as the surface behind it.
API Reference
Generated from the component's source — props, slots and emits as the component actually declares them.
Props
colorrequiredstringbooleanfalsestring