Usage
rgba(47, 119, 150, 0.7)
Color format
Component supports hex, hexa, rgb, rgba, hsl and hsla color formats. Slider to change opacity is displayed only for hexa, rgba and hsla formats:
#C5D899
With swatches
You can add any amount of predefined color swatches:
By default, there will be 10 swatches per row, you can change this with swatchesPerRow
prop:
To display swatches without picker set withPicker={false}
and fullWidth
props:
Size
Component has 5 predefined sizes: xs, sm, md, lg and xl:
Size
xs
sm
md
lg
xl
AlphaSlider
You can import and use AlphaSlider and HueSlider components outside of ColorPicker:
Alpha value: 1
Size
xs
sm
md
lg
xl
HueSlider
Hue value: 250
Size
xs
sm
md
lg
xl
Accessibility and usability
ColorPicker, AlphaSlider and HueSlider components are accessible by default:
- Saturation, hue and alpha sliders are focusable
- When user uses mouse to interact with slider, focus is moved on slider
- All values can be changed with arrows
To make component visible for screen readers provide following props:
ColorPicker component props
Name | Type | Description |
---|---|---|
alphaLabel | string | Alpha slider aria-label |
defaultValue | string | Uncontrolled component default value |
focusable | boolean | Should interactive elements be focusable |
format | "hex" | "hexa" | "rgba" | "rgb" | "hsl" | "hsla" | Color format |
fullWidth | boolean | Force picker to take 100% width of its container |
hueLabel | string | Hue slider aria-label |
onChange | (color: string) => void | Called when color changes |
onChangeEnd | (color: string) => void | Called when user stops dragging thumb or changes value with arrows |
onColorSwatchClick | (color: string) => void | Called when color swatch is clicked |
saturationLabel | string | Saturation slider aria-label |
size | "xs" | "sm" | "md" | "lg" | "xl" | Predefined component size |
swatches | string[] | Predefined colors |
swatchesPerRow | number | Number of swatches displayed in one row |
value | string | Controlled component value |
withPicker | boolean | Set to false to display swatches only |
ColorPicker component Styles API
Name | Static selector | Description |
---|---|---|
wrapper | .asuikit-ColorPicker-wrapper | Root element |
body | .asuikit-ColorPicker-body | Includes hue and alpha sliders and color preview |
preview | .asuikit-ColorPicker-preview | Color preview |
sliders | .asuikit-ColorPicker-sliders | Hue and alpha sliders wrapper |
slider | .asuikit-ColorPicker-slider | Alpha and hue sliders |
sliderOverlay | .asuikit-ColorPicker-sliderOverlay | Hue and alpha sliders overlays |
thumb | .asuikit-ColorPicker-thumb | Hue, alpha and saturation sliders thumbs |
saturation | .asuikit-ColorPicker-saturation | Saturation slider |
swatch | .asuikit-ColorPicker-swatch | ColorSwatch component in swatches list |
swatches | .asuikit-ColorPicker-swatches | Wrapper around all swatches |