<ColorPicker value={color} onValueChange={setColor} />The palette is the closed Badge colour set, so a colour picked here is a name you can store and render as a chip anywhere. It is not a free-form colour wheel, on purpose.
API
| Prop | Type | Default | |
|---|---|---|---|
className | string | — | |
clearable | boolean | false | Offer a clear affordance that reports null. |
clearLabel | string | "Clear selection" | |
contentClassName | string | — | |
defaultValue | "amber" | "blue" | "cyan" | "emerald" | "fuchsia" | "gray" | "green" | "indigo" | "lime" | "orange" | "pink" | "purple" | "red" | "rose" | "sky" | "slate" | "teal" | "violet" | "yellow" | "zinc" | null | null | Initial selection for uncontrolled usage. |
disabled | boolean | false | |
name | string | — | When set, renders a hidden input so plain form posts include the color. |
onValueChange | ((color: "amber" | "blue" | "cyan" | "emerald" | "fuchsia" | "gray" | "green" | "indigo" | "lime" | "orange" | "pink" | "purple" | "red" | "rose" | "sky" | "slate" | "teal" | "violet" | "yellow" | "zinc" | null) => void) | — | |
placeholder | string | "Select a color" | |
value | "amber" | "blue" | "cyan" | "emerald" | "fuchsia" | "gray" | "green" | "indigo" | "lime" | "orange" | "pink" | "purple" | "red" | "rose" | "sky" | "slate" | "teal" | "violet" | "yellow" | "zinc" | null | — | Controlled selection; omit to let the picker manage its own state. |
Plus the DOM props of the element it renders. Source: color-picker/components/color-picker.tsx.