Swatch Picker

Выбор цвета из образцов: товар, тема, метка. Pro · Формы и ввод › Цвет, размер и эмодзи

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add swatch-picker

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { SwatchPicker } from 'valyro-ui-pro';

Prop	Type	Default
`swatches` *	`Swatch[]`		The colors, in order.
`selectionMode`	`'single' \| 'multiple'`	`'single'`	`single`: one color (radios, the default); `multiple`: any number (checkboxes, for filters).
`value`	`string[]`		Selected values (controlled).
`defaultValue`	`string[]`		Initial `value` when uncontrolled.
`onValueChange`	`(value: string[]) => void`		Called with the new `value` when it changes.
`name`	`string`		Name of the native inputs, so the selection submits with a form.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Diameter: `sm` 24px, `md` 32px, `lg` 40px. Default `md`.
`shape`	`'circle' \| 'square'`	`'circle'`	`circle` (default) or rounded `square`.
`disabled`	`boolean`	`false`	Disables every swatch.