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").
- Element
-
igc-color-picker
- 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"disabled
Section titled "disabled"Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcColorPickerComponentEventMap, AbstractConstructor<IgcBaseComboBoxComponent> >(IgcBaseComboBoxComponent) )
The disabled state of the component.
disabled: booleanDefined in src/internals/mixins/forms/types.ts:32
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: ColorFormat = 'hex'hideFormats
Section titled "hideFormats"Whether to hide the format picker buttons.
hideFormats: boolean = falseinvalid
Section titled "invalid"Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcColorPickerComponentEventMap, AbstractConstructor<IgcBaseComboBoxComponent> >(IgcBaseComboBoxComponent) )
Sets the control into invalid state (visual state only).
invalid: booleanDefined in src/internals/mixins/forms/types.ts:39
Optional label
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: stringThe 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: ColorPickerMode = 'default'Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcColorPickerComponentEventMap, AbstractConstructor<IgcBaseComboBoxComponent> >(IgcBaseComboBoxComponent) )
The name of the control, submitted with the form data.
name: stringDefined in src/internals/mixins/forms/types.ts:45
Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcColorPickerComponentEventMap, AbstractConstructor<IgcBaseComboBoxComponent> >(IgcBaseComboBoxComponent) )
Sets the open state of the component.
open: boolean = falseDefined in src/internals/mixins/combo-box.ts:34
scrollStrategy
Section titled "scrollStrategy"Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcColorPickerComponentEventMap, AbstractConstructor<IgcBaseComboBoxComponent> >(IgcBaseComboBoxComponent) )
Sets the behavior of the component when the parent container scrolls.
If the value is hide, the component hides while the anchor is fully out
of view. hide is the default value.
If the value is scroll, the component stays visible and anchored.
If the value is close, the component closes on each scroll.
scrollStrategy: PopoverScrollStrategy = 'hide'Defined in src/internals/mixins/combo-box.ts:49
showAlpha
Section titled "showAlpha"Whether to show the alpha slider and input.
showAlpha: boolean = falseswatches
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[] = []tagName
Section titled "tagName"The tagName read-only property of the Element interface returns the tag name of the element on which it's called.
tagName: "igc-color-picker" = 'igc-color-picker'Accessors
Section titled "Accessors"defaultValue
Section titled "defaultValue"get defaultValue(): anyDefined in src/internals/mixins/forms/types.ts:127
The initial value of the component.
set defaultValue(value: unknown): voidDefined in src/internals/mixins/forms/types.ts:127
Parameters
- value:
unknown
Returns void
Returns the HTMLFormElement associated with this element.
get form(): HTMLFormElement | nullDefined in src/internals/mixins/forms/types.ts:48
Returns HTMLFormElement | null
required
Section titled "required"get required(): anyDefined in src/internals/mixins/forms/types.ts:151
When set, makes the component a required field for validation.
set required(value: boolean): voidDefined in src/internals/mixins/forms/types.ts:151
Parameters
- value:
boolean
Returns void
validationMessage
Section titled "validationMessage"A string containing the validation message of this element.
get validationMessage(): stringDefined in src/internals/mixins/forms/types.ts:54
Returns string
validity
Section titled "validity"Returns a ValidityState object for the element.
get validity(): ValidityStateDefined in src/internals/mixins/forms/types.ts:51
Returns ValidityState
value
Section titled "value"get value(): anyThe 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.
set value(value: string): voidDefined in src/components/color-picker/color-picker.ts:240
Parameters
- value:
string
Returns void
willValidate
Section titled "willValidate"Returns true when the element is a candidate for constraint validation.
get willValidate(): booleanDefined in src/internals/mixins/forms/types.ts:59
Returns boolean
Methods
Section titled "Methods"checkValidity
Section titled "checkValidity"Checks validity and emits invalid when the control is invalid.
checkValidity(): booleanDefined in src/internals/mixins/forms/types.ts:114
Returns boolean
Hides the component.
hide(): Promise<boolean>Defined in src/internals/mixins/combo-box.ts:69
Returns Promise<boolean>
reportValidity
Section titled "reportValidity"Checks validity and shows the browser message when invalid.
reportValidity(): booleanDefined in src/internals/mixins/forms/types.ts:117
Returns boolean
setCustomValidity
Section titled "setCustomValidity"Sets a custom message. Invalid while message is not empty.
setCustomValidity(message: string): voidDefined in src/internals/mixins/forms/types.ts:120
Parameters
- message:
string
Returns void
Shows the component.
show(): Promise<boolean>Defined in src/internals/mixins/combo-box.ts:64
Returns Promise<boolean>
toggle
Section titled "toggle"Toggles the open state of the component.
toggle(): Promise<boolean>Defined in src/internals/mixins/combo-box.ts:74