Color Picker

Color selection. Free, MIT · Forms and input › Color, size and emoji

Installation

npx valyro-cli@latest add color-picker

npx shadcn@latest add https://valyro.xyz/r/color-picker.json

npm install valyro-ui

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

Prop	Type	Default
`value`	`string`		Hex colour: `#rrggbb`, or `#rrggbbaa` when `alpha` is on and the colour is translucent.
`defaultValue`	`string`	`DEFAULT_COLOR`	Initial `value` when uncontrolled.
`onValueChange`	`(value: string) => void`		Called with the new `value` when it changes.
`alpha`	`boolean`	`false`	Show the opacity slider.
`presets`	`string[]`		Preset swatches (any hex form).
`name`	`string`		Submits the colour with the surrounding form as lowercase hex (`#rrggbb` or `#rrggbbaa`).
`invalid`	`boolean`	`false`	Error state, e.g. from a FormField (marks the root with `data-invalid`).
`labels`	`Partial<ColorPickerLabels>`		Overrides for the built-in English text; keys left out keep their defaults.