Color picker
A swatch that opens the saturation, hue and alpha rails
Accent colour
Accent colour#3B9DFF
6.04:1against backgroundAA
Committed #3B9DFF.
Chosen
#3B9DFF · primaryOpen — the theme primary is chosen
Accent colour#3B9DFF
6.04:1against backgroundAA
A refused draft — destructive edge, committed value kept
Brand colour#1A3D60
Enter a hex colour, such as #2F6BFF or #2F6BFF80
1.52:1against backgroundFails
Closed — the trigger reports the value and the colour
Installation
npx shadcn@latest add @sudokw/components-color-pickerimport { ColorPicker } from "@gpuixui/components";Usage
import { useState } from "react";
import { ColorPicker } from "@gpuixui/components";
const [accent, setAccent] = useState("#2F6BFF");
<ColorPicker
label="Accent colour"
background="#FFFFFF"
onValueChange={setAccent}
swatches={["#2F6BFF", "#2563EB", "#0D9488", "#D97706"]}
value={accent}
/>;API reference
ColorPicker
| Prop | Type | Default | Consequence |
|---|---|---|---|
label | string | — | the trigger and panel's name; a blank value reads as "Color picker" so the trigger and the <label> hex value field are always named |
value | string | — | the controlled colour; undefined is uncontrolled, and a stored value that is not text means uncontrolled |
defaultValue | string | "#000000" | the uncontrolled starting colour; a stored default that is not text paints "#000000" |
onValueChange | (hex: string) => void | — | every committed colour, as uppercase hex with two alpha digits when not opaque |
background | string | the theme's page | the surface the contrast readout measures against; an unreadable value leaves the readout at 1.00:1 |
swatches | ReadonlyArray<string> | six theme roles | the preset row, in order; a stored value that is not a list paints the theme's defaults |
disabled | boolean | false | the trigger leaves the tab order and no part accepts a change |
className | string | — | compiled through @gpuixui/tw, joined after the trigger's recipe |
style | StateStyle<ColorPickerState> | — | resolved against { disabled, valid }, merged last |
testId | string | — | the root's locator; the trigger uses it, and its parts derive -swatch, -panel, -done, -area, -hue, -alpha, -hex, -error and -preset (each preset adds -<index>) |
Keyboard
- Arrow UpArrow DownArrow LeftArrow Right
- moves the saturation and brightness thumb, or the focused hue or opacity rail
- Tab
- moves between the panel's controls and wraps inside it, because the panel is not modal
- Escape
- discards a typed hex draft, then closes the panel
read from color-picker.tsx, parts.tsx
Edit this page on GitHubapps/docs/content/docs/components/color-picker.mdx