Color input component.
The user picks a color with the HSV saturation/value canvas, the hue slider and the optional alpha slider. The user can also type a color string: hex, rgb(a), hsl(a) or a named CSS color.
The component supports pre-defined swatches and the native EyeDropper API,
where the browser provides one. The anchor is a trigger button
(mode="default") or an editable text field (mode="input").
- Slots
-
value-missing— Renders content when the required validation fails. -
custom-error— Renders content when setCustomValidity(message) is set. -
invalid— Renders content when the component is in invalid state (validity.valid = false). -
helper-text— Renders content below the picker.
- CSS Parts
-
anchor— The trigger element that opens the picker (the button in default mode, or the swatch prefix in input mode). -
empty— Applied alongside `anchor` when no color value is set, rendering a checkered background. -
label— The label rendered above the anchor in default mode. -
picker— The popover container holding the canvas, sliders, inputs and swatches. -
main-row— The row containing the hue slider and the copy/eyedropper buttons. -
alpha-row— The row containing the alpha slider and input, rendered when `show-alpha` is set. -
inputs-row— The row containing the format select and the color value input. -
buttons— The wrapper around the copy and eyedropper buttons. -
hue— The hue slider. -
alpha— The alpha slider. -
copy— The button that copies the current color value to the clipboard. -
eye-dropper— The button that activates the EyeDropper API. -
format-select— The select control used to switch the color string format. -
swatches— The container of the pre-defined color swatches. -
swatch— An individual color swatch button.
Properties
Section titled "Properties"format
Section titled "format"Sets the color format of the string value.
A format change renders value in the new notation. The color does not
change, so the component emits no igcInput or igcChange.
format: ColorFormathideFormats
Section titled "hideFormats"Whether to hide the format picker buttons.
hideFormats: booleanlabel
Section titled "label"The label of the component.
In mode="input" the component forwards the label to the anchor input.
In mode="default" it renders the label as a separate element.
label: string | undefinedThe mode of the color picker.
In "default" mode the anchor is a trigger button. In "input" mode the
anchor is an editable text field with a color swatch prefix. The prefix
also opens the picker.
mode: ColorPickerModeswatches
Section titled "swatches"Pre-defined color strings. The component renders them as clickable swatches below the picker controls. A click on a swatch commits its color as the value.
swatches: string[]value
Section titled "value"The value of the component as a CSS color string. Accepts hex, rgb(a), hsl(a) and named colors.
An empty, whitespace-only or invalid string clears the value.
value: stringEvents
Section titled "Events"onChange
Section titled "onChange"Emitted when the value of the component is committed.
onChange(args: CustomEvent<string>): voidParameters
- args:
CustomEvent<string>
Returns void
onClosed
Section titled "onClosed"Emitted after closing the picker dropdown.
onClosed(args: CustomEvent<void>): voidParameters
- args:
CustomEvent<void>
Returns void
onClosing
Section titled "onClosing"Emitted just before the picker dropdown is closed.
onClosing(args: CustomEvent<void>): voidParameters
- args:
CustomEvent<void>
Returns void
onInput
Section titled "onInput"Emitted when the value of the component is changed.
onInput(args: CustomEvent<string>): voidParameters
- args:
CustomEvent<string>
Returns void
onOpened
Section titled "onOpened"Emitted after the picker dropdown is open.
onOpened(args: CustomEvent<void>): voidParameters
- args:
CustomEvent<void>
Returns void
onOpening
Section titled "onOpening"Emitted just before the picker dropdown is open.
onOpening(args: CustomEvent<void>): voidParameters
- args:
CustomEvent<void>