Components
ColorPicker
Turn a colour into a hex string: a swatch trigger, a palette the caller supplies, and the value always available as text.
Examples
A palette and a value
Presets come from the caller — the component ships no default palette, because a colour that means something is a product decision.
#3b6ef5
The value is a normalised `#rrggbb` string — what a form, a CSS variable or a design token stores.
<ColorPicker
value={color}
onValueChange={setColor}
swatches={[
{ value: "#3b6ef5", label: "Sapphire" },
{ value: "#0f9d8f", label: "Teal" },
]}
label="Accent colour"
/>Uncontrolled, and disabled
With `defaultValue` the component keeps its own state; `disabled` keeps the value readable without letting anyone change it.
<ColorPicker defaultValue="#0f9d8f" swatches={swatches} label="Series colour" />
<ColorPicker defaultValue="#c22f5a" swatches={swatches} label="Locked colour" disabled />In a field
Inside a `Field` the visible label is the field's, and the message slot is where a rule about the value belongs.
Used for the primary line on every chart.
<Field label="Series colour" description="Used for the primary line on every chart.">
<ColorPicker value={color} onValueChange={setColor} swatches={swatches} />
</Field>Usage
import { ColorPicker } from "@luc/ui";<ColorPicker value={color} onValueChange={setColor} swatches={swatches} label="Series colour" />`value` plus `onValueChange` controls it; `defaultValue` leaves the state to the component. Either way the value is a hex string, so a form stores it like any other text field.
API
Read from the published TypeScript API, so a prop that is not listed here does not exist and a default that is listed is the one the compiler sees.
| Export | Kind | Signature |
|---|---|---|
ColorPicker | 7 documented props | ({ value, defaultValue, onValueChange, swatches, label, disabled, className, }: ColorPickerProps) => import("@types/react").JSX.Element |
ColorPicker props
Type: ColorPickerProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
className? | string | undefined | — | |
defaultValue? | string | undefined | — | |
disabled? | boolean | undefined | — | |
label? | string | undefined | — | |
onValueChange? | ((value: string) => void) | undefined | — | |
swatches? | readonly ColorPickerSwatch[] | undefined | — | Preset swatches. Supply the product's own palette; there is no default set. |
value? | string | undefined | — |
Guidelines
Do
- Pass the product's own `swatches`: the component ships no default palette, because a colour that means something is the caller's decision.
- Keep the value a hex string; the component parses what it is given and hands back a normalised `#rrggbb`.
- Give it a `label` when it stands alone, and let `Field` name it when it sits in a form.
Don't
- Expect a colour space conversion: hex in, hex out, and nothing is written to the clipboard for you.
- Use a swatch as the only encoding of a meaning — a colour a reader cannot distinguish carries no state.
- Reach for it when the colour is fixed by the design system; a swatch row is for a choice, not a setting.
Accessibility
The trigger is a real button whose accessible name is the label plus the current value, and the popover exposes the value as text — a hex field a reader can select and copy — so the control does not depend on seeing a colour. Preset swatches are buttons with their own names, and Escape closes the popover and returns focus to the trigger.
Related