ColorCheck

Color swatch selector component. Uses colord for color format conversion and automatic brightness detection.

Basic Usage

<TColorCheck color="#066fd1" v-model="selected" />
<TColorCheck color="#d63939" v-model="selected" />

Multiple Select

<TColorCheck color="#066fd1" multiple v-model="selected" />

Rounded

<TColorCheck color="#2fb344" rounded v-model="selected" />

Output Format (color-format)

<TColorCheck color="#066fd1" color-format="rgb" v-model="color" />

Array Mode (colors)

<TColorCheck v-model="selected" :colors="[
  { color: '#066fd1' },
  { color: '#d63939' },
  { color: '#2fb344' },
]" />

Disabled

<TColorCheck color="#066fd1" v-model="color" disabled />

API

Props

Prop	Type	Default	Description
v-model	any | any[]	—	Bound value (single: any type, multiple: array)
color	string	'#066fd1'	Swatch color. Accepts #hex / hex / rgb() / hsl() / rgba()
colors	ColorCheckOption[]	—	Option array, renders multiple swatches
color-format	'hex' | '#hex' | 'rgb' | 'hsv' | 'hsl'	—	Output format (default: raw value)
multiple	boolean	false	Enable multi-select
rounded	boolean	false	Rounded circular swatches
disabled	boolean	false	Disabled state
name	string	—	Native name attribute (auto-generated for radio groups)