Color Picker
A fully accessible, token-driven ColorPicker component built with strict WAI-ARIA compliance.
tsx
import { ColorPicker } from '@nofinite/nui';Interactive Preview
Loading preview...
Usage
Basic Example
tsx
import { ColorPicker } from '@nofinite/nui';
<ColorPicker />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | #000000 | The currently selected color in hex format |
onChange | ((color: string) => void) | — | Callback fired when a color is selected |
presets | string[] | [
'#000000', '#52525b', '#a1a1aa', '#ffffff',
'#ef4444', '#f97316', '#f59e0b', '#84cc16', '#22c55e', '#14b8a6', '#06b6d4', '#3b82f6', '#6366f1', '#a855f7', '#d946ef', '#f43f5e',
'#7f1d1d', '#7c2d12', '#78350f', '#3f6212', '#14532d', '#134e4a', '#164e63', '#1e3a8a', '#312e81', '#581c87', '#701a75'
] | Array of hex colors to show in the preset grid |
showCustom | boolean | true | Whether to show the native color picker input for custom colors |
disabled | boolean | false | Disable the color picker |
icon | LucideIcon | — | Custom icon to display on the trigger button. Defaults to Palette. |
variant | enum | default | Visual variant for the trigger button. 'default' is a form input, 'icon' is a compact toolbar button. |
showText | boolean | true | Show the hex text in the default variant |
showSwatch | boolean | true | Show the color swatch circle in the default variant |
showIcon | boolean | true | Show the palette icon in the default variant |
Accessibility & Guidelines
- Semantic Tokens: Built strictly using Nuicss semantic tokens (
bg-surface,text-default,border-subtle,bg-primary). - Keyboard Navigation: Adheres to strict WAI-ARIA standards.
- Screen Reader Support: Includes semantic roles and live regions where appropriate.