ColorSwatchPicker
color-swatch-pickerChooses a color from a labeled, keyboard-accessible swatch collection.
Usage
Basic usage
Discrete preset color block radio selection, uncontrolled use defaultValue for initial selection.
tsx
const PALETTE = ["#ef4444", "#f97316", "#eab308", "#22c55e", "#06b6d4", "#3b82f6", "#8b5cf6", "#ec4899"];
<ColorSwatchPicker colors={PALETTE} defaultValue="#3b82f6" />Dimensions
size supports sm / md / lg.
tsx
<>
<ColorSwatchPicker colors={PALETTE} defaultValue="#22c55e" size="sm" />
<ColorSwatchPicker colors={PALETTE} defaultValue="#22c55e" size="lg" />
</>Disabled
disabled Reduces the transparency of the entire group and blocks interaction.
tsx
<ColorSwatchPicker colors={PALETTE} defaultValue="#8b5cf6" disabled />When to use
Use ColorSwatchPicker to choose one value from a fixed palette, such as brand or label colors. It presents RadioGroup semantics as color swatches and includes arrow-key navigation. Use ColorPicker when the user needs an arbitrary color.
Import
ts
import { ColorSwatchPicker } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| colors* | string[] | — | Default color block list, any CSS color string (hex / rgb / hsl / named color) |
| value | string | — | Controlled selection value (must be strictly equal to an item in colors) |
| defaultValue | string | — | Uncontrolled initial selection value |
| size | "sm" | "md" | "lg" | "md" | Color block size |
| disabled | boolean | false | Disable entire group |
| className | string | — | Additional class name for the container. |
| aria-label | string | Locale default | Accessible name; enUS provides “Color swatches”, and an explicit value takes precedence. |
Events
| Event | Type | Description |
|---|---|---|
| onValueChange | (color: string) => void | Select change callback |
Usage guidelines
- A controlled
valuemust be strictly equal to an entry incolorsto show as selected."#FFF"differs from"#ffffff", and"#3b82f6"differs from"rgb(59,130,246)"; normalize casing and format before passing values. - The component supports single selection only.
- The default group label follows
ConfigProvider locale; the no-provider fallback remains Chinese.
Related
SecretField · Combobox · Listbox · Mentions · InputOTP · Rating
Playground
#3b82f6<ColorSwatchPicker colors={PALETTE} defaultValue="#3b82f6" />