Color picker
Color input component allowing for multiple methods of entry and selection.
Direct text entry will match hexadecimal (hex) and RGB(a) colors, and output will return both hex and RGBa values. Spatial selection involves HSV manipulation, which is converted to hex.
Swatches allow consumers to predefine preferred or suggested choices. The swatches must also be entered in hex or RGBa format.
Color palette picker
Use EuiColorPalettePicker to select palettes to apply colors to data visualization like maps and charts.
Use the palettes prop to pass your palettes as an array strings or an array of ColorStops in the form of { stop: number, color: string }. For each object, you should pass a palette (array of hex values) and specify the type. Use fixed palettes for categorical data and gradient palettes for continuous data.
Each of the palettes, excluding type='text' palettes, can use the append prop to append an element to the right of the title.
Color palette display
Use EuiColorPaletteDisplay to show the palette in use for a data visualization.
Use the palette prop to pass your palette as an array of color strings or an array of ColorStops in the form of { stop: number, color: string }. Use fixed palettes for categorical data and gradient palettes for continuous data.
In cases you need to apply a palette, it's recommended to use the EuiColorPalettePicker.
Format selection
Format selection does not limit the format of text input the picker will allow, but instead attempts to keep consistency during HSV selection. By default, the color picker will automatically use the last input value format. Notice in following the examples how hue and saturation selection behave differently.
Swatches will always show the "as-authored" color value, as will the value provided via the color prop.
Alpha channel (opacity) selection
To allow color opacity via alpha channel, set showAlpha=true. This will also display a range slider allowing manual opacity updates.
Custom color swatches
By default the colors provided are the ten color blind safe visualization colors. You can however pass in your own color set with the swatches prop.
Limited selection modes
By default, both swatch selection and the gradient color map will be rendered. Use the mode prop to pass swatch for swatch-only selection, or pass picker for gradient map and hue slider selection without swatches.
Custom button
Available only in EuiColorPicker. You can optionally use a custom button as the trigger for selection using the button prop. Please remember to add accessibility to this component, using proper button markup and aria labeling.
Additionally, use the secondaryInputDisplay prop to show a secondary or alternative color value input. Options include top and bottom placement.
Empty state
For instances where an "empty" color picker has meaning other than transparent color value, use the placeholder prop to provide context. Removing color selection and returning to the default state can be made easier by setting isClearable=true.
Inline
Available only in EuiColorPicker. Set the display prop to inline to display the color picker without an input or popover. Note that the button prop will be ignored in this case.
Containers
Demonstrating that both color selection components can exist in portal containers and that their popover positioning works in nested contexts.
Option toggling
Props
EuiColorPicker
Prop | Description and type | Default value |
|---|---|---|
Prop onChange# | Description and type text (string, as entered or selected) (text: string, output: EuiColorPickerOutput) => void | Default value Required |
Prop button# | Description and type Custom element to use instead of text input ReactElement | Default value |
Prop compressed# | Description and type Use the compressed style for EuiFieldText boolean | Default value false |
Prop display# | Description and type Type: EuiColorPickerDisplay | Default value default |
Prop disabled# | Description and type Type: boolean | Default value |
Prop fullWidth# | Description and type Type: boolean | Default value false |
Prop id# | Description and type Type: string | Default value |
Prop isInvalid# | Description and type Custom validation flag boolean | Default value |
Prop mode# | Description and type Choose between swatches with gradient picker (default), swatches only, gradient picker only, or secondary input only. EuiColorPickerMode | Default value default |
Prop popoverZIndex# | Description and type Custom z-index for the popover number | Default value |
Prop readOnly# | Description and type Type: boolean | Default value false |
Prop swatches# | Description and type Array of hex strings (3 or 6 character) to use as swatch options. Defaults to EUI visualization colors string[] | Default value |
Prop prepend# | Description and type Creates an input group with element(s) coming before input. It only shows when the PrependAppendType | Default value |
Prop append# | Description and type Creates an input group with element(s) coming after input. It only shows when the PrependAppendType | Default value |
Prop showAlpha# | Description and type Whether to render the alpha channel (opacity) value range slider. boolean | Default value false |
Prop format# | Description and type Will format the text input in the provided format when possible (hue and saturation selection) "hex" | "rgba" | Default value |
Prop secondaryInputDisplay# | Description and type Placement option for a secondary color value input. "top" | "bottom" | "none" | Default value none |
Prop isClearable# | Description and type Add a button to the primary input to clear its value. boolean | Default value false |
Prop placeholder# | Description and type Text to replace the default 'Transparent' placeholder for unset color values. string | Default value |
Prop className# | Description and type Type: string | Default value |
Prop aria-label# | Description and type Type: string | Default value |
Prop data-test-subj# | Description and type Type: string | Default value |
Prop css# | Description and type Type: Interpolation<Theme> | Default value |
Prop color# | Description and type hex (string) string | Default value |
Prop onBlur# | Description and type Type: () => void | Default value |
Prop onFocus# | Description and type Type: () => void | Default value |