Color selection
Two components exist to aid color selection: EuiColorPicker and EuiColorPalettePicker.
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 manipulaton, 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.
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 euiPaletteColorBlind() |
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. "none" | "top" | "bottom" | 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 |
EuiColorPalettePicker
Prop | Description and type | Default value |
|---|---|---|
Prop palettes# | Description and type An array of one of the following objects: #EuiColorPalettePickerPaletteText, #EuiColorPalettePickerPaletteFixed, #EuiColorPalettePickerPaletteGradient EuiColorPalettePickerPaletteProps[] | Default value Required |
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 append# | Description and type Creates an input group with element(s) coming after input. PrependAppendType | Default value |
Prop prepend# | Description and type Creates an input group with element(s) coming before input. PrependAppendType | Default value |
Prop name# | Description and type Type: string | Default value |
Prop fullWidth# | Description and type Expand to fill 100% of the parent. boolean | Default value false |
Prop isLoading# | Description and type Type: boolean | Default value false |
Prop onFocus# | Description and type Type: (event?: FocusEvent<Element, Element>) => void | Default value |
Prop onBlur# | Description and type Type: (event?: FocusEvent<Element, Element>) => void | Default value |
Prop onChange# | Description and type You must pass an (value: string) => void | Default value |
Prop buttonRef# | Description and type Type: Ref<HTMLButtonElement> | Default value |
Prop compressed# | Description and type Type: boolean | Default value false |
Prop placeholder# | Description and type Placeholder to display when the current selected value is empty. ReactNode | Default value |
Prop readOnly# | Description and type Type: boolean | Default value false |
Prop isOpen# | Description and type Controls whether the options are shown. Default: false boolean | Default value |
Prop isInvalid# | Description and type Type: boolean | Default value false |
Prop valueOfSelected# | Description and type Type: string | Default value |
Prop itemClassName# | Description and type Classes for the context menu item string | Default value |
Prop popoverProps# | Description and type Optional props to pass to the underlying EuiInputPopover. Does not accept a nested Partial<CommonProps & Omit<EuiInputPopoverProps, "isOpen">> | Default value |
Prop selectionDisplay# | Description and type Specify what should be displayed after a selection: a "title" | "palette" | Default value palette |