Color swatch
The Color swatch allows users to select a single predefined color.
Used for this
- To let users change, update, or add predefined colors
Not for this
- For more finite control over color selection, use the Color picker
How to use it
Default
The Color swatch allows users to select a single predefined color.
Custom trigger
The Color swatch can be displayed using a trigger, e.g. an Icon button.
Dialog
The Color swatch can be shown inside a dialog using <ColorSwatchDialog>.
API
ColorSwatch
Extends HTMLAttributes<HTMLTableElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
colors | { value: string; label: string; }[][] | Required | Sets the two-dimension array of labeled HEX and RGB/A string colors |
defaultSelectedColIndex | number | Sets the default selected column index in an uncontrolled color swatch | |
defaultSelectedRowIndex | number | Sets the default selected row index in an uncontrolled color swatch | |
isCheckboxGroup | boolean | Determines if the color swatch is backed by radio (default) or checkbox inputs | |
name | string | Required | Sets the name used to reference the value of the control |
onSelect | Handles color swatch select event | ||
selectedColIndex | number | null | Sets the selected column index in a controlled color swatch | |
selectedRowIndex | number | null | Sets the selected row index in a controlled color swatch |
ColorSwatchDialog
Extends HTMLAttributes<HTMLDivElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
buttonProps | HTMLAttributes<HTMLButtonElement> | Passes HTML attributes to the color dialog button element | |
colors | { value: string; label: string; }[][] | Required | Sets the two-dimension array of labeled HEX and RGB/A string colors |
defaultSelectedColIndex | number | Sets the default selected column index in an uncontrolled color swatch | |
defaultSelectedRowIndex | number | Sets the default selected row index in an uncontrolled color swatch | |
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 |
isCheckboxGroup | boolean | Determines if the color swatch is backed by radio (default) or checkbox inputs | |
isOpen | boolean | Opens the dialog in a controlled color swatch dialog | |
name | string | Required | Sets the name used to reference the value of the control |
onDialogChange | Handles dialog changes Parameters changes The changed dialog state | ||
onSelect | Handles color swatch select event | ||
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 |
selectedColIndex | number | null | Sets the selected column index in a controlled color swatch | |
selectedRowIndex | number | null | Sets the selected row index in a controlled color swatch | |
zIndex | number | 1000 | Sets the z-index of the color dialog |