Color picker
The Color picker allows users to choose colors using sliders and input fields.
Used for this
- To let users change or update brand colors
- To let users configure chart colors
How to use it
Default
The Color picker allows users to choose colors using sliders and input fields.
Custom trigger
The Color picker can be displayed using a trigger, e.g. an icon button.
Dialog
The Color picker can be shown inside a dialog using <ColorPickerDialog>.
Form input
The Color picker dialog can be used in an input group.
Opaque
Remove alpha transparency using the isOpaque prop.
Configuration
- Name9.0.0-next.26•View source•View on npm
- Installnpm install @zendeskgarden/react-colorpickers
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { ColorPicker, ColorPickerDialog } from '@zendeskgarden/react-colorpickers'
API
ColorPicker
Extends HTMLAttributes<HTMLDivElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
color | string | IColor | Sets the color for a controlled color picker | |
defaultColor | string | IColor | #fff | Sets the color for an uncontrolled color picker |
isOpaque | boolean | Hides alpha transparency fields | |
labels | { hueSlider?: string; alphaSlider?: string; hex?: string | undefined; red?: string | undefined; green?: string | undefined; blue?: string | undefined; alpha?: string | undefined; } | undefined | {} | Replaces label text within the color picker |
onChange | Handles color picker changes Parameters color A color picker state |
ColorPickerDialog
Extends HTMLAttributes<HTMLDivElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
buttonProps | HTMLAttributes<HTMLButtonElement> | Passes HTML attributes to the color dialog button element | |
color | string | IColor | Sets the color for a controlled color picker | |
defaultColor | string | IColor | Sets the color for an uncontrolled color picker | |
disabled | boolean | Disables the color dialog button | |
focusInset | boolean | Applies inset box-shadow styling on focus | |
hasArrow | boolean | Adds an arrow to the color dialog | |
isAnimated | boolean | true | Animates the color dialog |
isOpaque | boolean | Hides alpha transparency fields | |
isOpen | boolean | Opens the dialog in a controlled color picker dialog | |
labels | { hueSlider?: string; alphaSlider?: string; hex?: string | undefined; red?: string | undefined; green?: string | undefined; blue?: string | undefined; alpha?: string | undefined; } | undefined | Replaces label text within the color picker | |
onChange | Handles color picker changes Parameters color A color picker state | ||
onClose | Handles close actions. Can be triggered from the backdrop. Parameters color A color picker state | ||
onDialogChange | Handles dialog changes Parameters changes The changed dialog state | ||
placement | 'end' | 'start' | 'auto' | 'top' | 'bottom' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'end-top' | 'end-bottom' | 'start-top' | 'start-bottom' | 'bottom-start' | Adjusts the placement of the color dialog |
zIndex | number | 1000 | Sets the z-index of the color dialog |