ColorSwatchPicker
color-swatch-picker预设色块单选 · base-ui RadioGroup 换皮(方向键 a11y) + 选中 ring + mix-blend 勾(零依赖)
用法
基础用法
离散预设色块单选，非受控用 defaultValue 给初始选中。
tsx
const PALETTE = ["#ef4444", "#f97316", "#eab308", "#22c55e", "#06b6d4", "#3b82f6", "#8b5cf6", "#ec4899"];
<ColorSwatchPicker colors={PALETTE} defaultValue="#3b82f6" />尺寸
size 支持 sm / md / lg。
tsx
<>
<ColorSwatchPicker colors={PALETTE} defaultValue="#22c55e" size="sm" />
<ColorSwatchPicker colors={PALETTE} defaultValue="#22c55e" size="lg" />
</>禁用
disabled 整组降透明度并屏蔽交互。
tsx
<ColorSwatchPicker colors={PALETTE} defaultValue="#8b5cf6" disabled />何时用
从一组固定预设色（品牌色板、标签颜色）里单选一个时用，本质是 RadioGroup 的色块皮肤，自带方向键漫游。若需自由取任意颜色用 ColorPicker。
导入
ts
import { ColorSwatchPicker } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| colors* | string[] | — | 预设色块列表，任意 CSS 颜色串（hex / rgb / hsl / 具名色） |
| value | string | — | 受控选中值（须与 colors 中某项严格相等） |
| defaultValue | string | — | 非受控初始选中值 |
| size | "sm" | "md" | "lg" | "md" | 色块尺寸 |
| disabled | boolean | false | 整组禁用 |
| className | string | — | 透传到容器 |
| aria-label | string | — | 无障碍标签 |
Events
| 事件 | 类型 | 说明 |
|---|---|---|
| onValueChange | (color: string) => void | 选中变更回调 |
禁忌 / 坑
- 受控
value必须与colors中某项严格字符串相等才会高亮；"#FFF"与"#ffffff"、"#3b82f6"与"rgb(59,130,246)"视为不同值。统一大小写与写法。 - 仅支持单选；多选场景不在本组件范围内。
相关
SecretField · Combobox · Listbox · Mentions · InputOTP · Rating
Playground
#3b82f6<ColorSwatchPicker colors={PALETTE} defaultValue="#3b82f6" />