Skip to content

SiColorPickerComponent documentation

selector
si-color-picker

Input Properties

NameTypeDefaultDescription
ariaLabel
TranslatableString$localize`:@@SI_COLOR_PICKER.SELECTED_LABEL:Selected color {{color}}`Aria label for the color input button.
autoClose
booleanfalseSpecifies whether the color popup should automatically close on a color selection.
color
stringThe selected color.
colorPalette
string[]The first 16 colors of the Element data color palette.The color palette to choose the colors from. As colors, only valid CSS variable names omitting the -- prefix or Element color tokens omitting the $ prefix are supported.

Note: If custom CSS variables are provided, they need to be defined for both light and dark mode.
disabled
booleanfalseSpecifies whether the color picker component is disabled.
scrollStrategy
ScrollStrategydefaultConnectedOverlayScrollStrategy()Optional CDK scroll strategy used for the color picker overlay.

Output Properties

NameTypeDescription
colorChange
stringThe selected color.

Types Documentation

Represents a translatable string. This can either be a translation key, e.g. ACTIONS.EDIT that will be automatically translated when displayed on the UI or a pre-translated string, e.g. Edit . Equivalent to a normal string in usage and functionality.

Except where otherwise noted, content on this site is licensed under MIT License.