npm i @velkin/react
import { VuColorSwatchPicker } from "@velkin/react/color-swatch-picker";| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | "" | Current selection (`swatch.value` or `swatch.color` when value is empty). |
| colors | string[] | [] | Auto-mode palette (CSS strings); ignored when slotted swatches exist. |
| columns | number | 0 | Grid column count; `0` = auto-fill (grid layout only). |
| size | VuColorSwatchSize | "md" | Swatch size forwarded to each chip. |
| variant | VuColorSwatchPickerVariant | "circle" | Swatch outline: `circle` (default) or `square`. |
| layout | VuColorSwatchPickerLayout | "grid" | `grid` (default) or vertical `stack`. |
| label | string | "" | Accessible name for the radiogroup; empty uses the locale catalog. |
| showErrors | boolean | false | Shows validation after activation. |
| validationActive | boolean | false | Drives invalid styling after activation. |
| invalid | boolean | false | True when the last validation run found errors. |
| Event | Detail | Description |
|---|---|---|
| vu-change | VuColorSwatchPickerChangeDetail | Selection changed. |
| vu-invalid | CustomEvent | When validation messages are recomputed while `validationActive`. |
| Slot | Description |
|---|---|
| — | - Optional `<vu-color-swatch>` children (composition mode). When non-empty, `colors` is ignored. |
| error | Replaces default validation message list when assigned. |
| Part | Description |
|---|---|
| base | Swatch container (grid or stack). |
| field | Column that stacks the palette and optional error. |
| error-message | Region for `slot="error"` or stacked default validation lines. |
| error-line | One default validation string when `slot="error"` is empty. |
| Name | Definition |
|---|---|
| VuColorSwatchPickerChangeDetail | |
| VuColorSwatchPickerLayout | |
| VuColorSwatchPickerVariant | |
| VuColorSwatchSize | |