Color Picker
Select colors from preset palette or custom hex values.
Basic Color Picker
Color selection with preset palette and hex input
Without Input Field
Only preset colors, no hex input
Custom Preset Colors
Custom color palette
Disabled State
Color picker in disabled state
API Reference
Props and usage details
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | - | Selected hex color value |
| onChange | (color: string) => void | - | Callback when color changes |
| label | string | - | Label text above the picker |
| presetColors | string[] | [18 colors] | Array of preset hex colors |
| showInput | boolean | true | Show hex input field |
| disabled | boolean | false | Whether the picker is disabled |
Features
- ✓18 preset colors in organized grid
- ✓Large color preview area
- ✓Hex color input with validation
- ✓Native color picker integration
- ✓Full design system token support
- ✓Dark mode support