Swatch Picker
Pick a color from swatches: product, theme, label. Pro · Forms and input › Color, size and emoji
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add swatch-pickernpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { SwatchPicker } from 'valyro-ui-pro';Props
| 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. |
Related components
- Color Picker — Color selection
- Size Picker — Size selection: tiles or a scrolling row, out-of-stock states
- Emoji Picker — Emoji picker: search, categories, skin tones, recents
- Text Input — Text fields
- Textarea — Multiline text input
- Search Input — Search field
- Mentions Input — Text with @mentions and #tags, async suggestions
- Tags Input — Tag entry
- Select — Pick one option from a list
- Multi Select — Pick several options
- Combobox — Searchable select
- Listbox — Option list on the page: one or several, Shift ranges
Previous: Color Picker · Next: Size Picker · All Forms and input