Inputsibling
ColorPicker is a specialized input for colorsColorPicker
Color selection control with hex input and visual picker. Displays a swatch that opens a full color picker on click.
Setup
import { ColorPicker } from '@fragments-sdk/ui';Examples
Default
Basic color picker with label
Loading preview...
With Helper Text
Color picker with helper text
Loading preview...
Controlled
Controlled color picker that logs changes
Loading preview...
Multiple Pickers
Multiple color pickers for theme configuration
Loading preview...
Compact
Small size with swatch only (no input)
Loading preview...
Sizes
Different size variants
Loading preview...
Error State
Color picker with error styling
Loading preview...
Disabled
Disabled color picker
Loading preview...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | Not set | Label text above the picker |
value | string | Not set | Controlled color value in hex format (#RRGGBB) |
defaultValue | string | #000000 | Default color for uncontrolled usage |
onChange | function | Not set | Called with new color value when changed |
onValueChange | function | Not set | Alias for onChange (Radix convention) |
helperText | string | Not set | Helper text below the picker (preferred) |
description | string | Not set | Deprecated alias for helperText |
error | boolean | false | Show error styling |
disabled | boolean | false | Disable the color picker |
size | enumsmmdlg | md | Size variant |
showInput | boolean | true | Show the hex input field |
Usage Guidelines
When to use
- Theme customization interfaces
- Brand color selection
- Design tool color inputs
- User preference settings for colors
When not to use
- Predefined color options only (use RadioGroup with swatches)
- Simple color display without editing (use a colored Badge)
- Color indication only (use semantic color tokens)
Best practices
- Always provide a label to describe what the color is for
- Use helperText to explain color usage or constraints
- Consider providing color presets alongside the picker for common choices
- Validate hex format (#RRGGBB) on input
Accessibility
- Label is associated with the color input
- Swatch button has appropriate aria-label
- Color picker popup is keyboard accessible
- Hex input allows direct text entry