Settings row for a list of colors: a swatch per stop, each opening the OKLCH picker, and a remove and add pair at the far right bounded by min and max.
The import and the props worth knowing about, in one place.
import { InspectorMulticolor } from "@/components/beste/component/inspector-multicolor";
// Uncontrolled
<InspectorMulticolor label="Color stops" defaultValue={["#3a29ff", "#ff94b4", "#ff3232"]} />
// Controlled, with a separate commit for expensive work. Gradients and shader
// backgrounds are the usual reason to want one.
<InspectorMulticolor
label="Color stops"
value={colorStops}
onValueChange={setColorStops} // every adjustment
onValueCommit={(value) => console.log("persist", value)} // release, add, remove
min={1}
max={3}
/>
<InspectorMulticolor
label="Palette"
icon={Palette} // optional leading icon
min={2}
max={6}
newColor="#171717" // what the add button appends
format="oklch" // "hex" (default) | "oklch" | "rgb"
alpha // 8-digit hex, checkerboard behind each swatch
swatches={["#171717", "#6366f1", "#0ea5e9"]} // presets inside the picker
tone="outline" // "muted" (default) | "outline" | "ghost"
size="sm" // "sm" | "default" | "lg"
value={palette}
onValueChange={setPalette}
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
label* | string | — | Label rendered on the left, inside the row. |
icon | LucideIcon | — | Optional leading icon shown before the label. |
value | string[] | — | Controlled list of colors. Pair it with `onValueChange`. |
defaultValue | string[] | — | Initial list in uncontrolled mode. |
onValueChange | (value: string[]) => void | — | Fires on every edit: a colour adjustment, an added stop, a removed one. |
onValueCommit | (value: string[]) => void | — | Fires once an edit is finished — a drag released in the picker, a stop added or removed. Use it for work too expensive to run per frame. |
min | number | 1 | Fewest colors the list may hold; the remove button stops there. |
max | number | 5 | Most colors the list may hold; the add button stops there. |
newColor | string | "#ffffff" | Color appended by the add button. |
format | "hex" | "oklch" | "rgb" | "hex" | Notation written back through the callbacks. |
alpha | boolean | — | Carry an alpha channel, and show its row in the picker. |
swatches | string[] | — | Preset colors offered inside the picker. |
disabled | boolean | — | Block interaction and dim the row. |
tone | "muted" | "outline" | "ghost" | "muted" | Surface treatment: filled (default), hairline outline, or bare until hover. |
size | "sm" | "default" | "lg" | "default" | Row height preset. |
className | string | — | |
aria-label | string | — | Accessible name for the group. Falls back to `label`. |