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< IgcColorPickerEventMap, AbstractConstructor<IgcBaseComboBoxComponent> >(IgcBaseComboBoxComponent) )
The disabled state of the component.
disabled: booleanDefined in src/internals/mixins/forms/types.ts:30
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< IgcColorPickerEventMap, AbstractConstructor<IgcBaseComboBoxComponent> >(IgcBaseComboBoxComponent) )
Sets the control into invalid state (visual state only).
invalid: booleanDefined in src/internals/mixins/forms/types.ts:37
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< IgcColorPickerEventMap, AbstractConstructor<IgcBaseComboBoxComponent> >(IgcBaseComboBoxComponent) )
The name of the control, submitted with the form data.
name: stringDefined in src/internals/mixins/forms/types.ts:43
Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcColorPickerEventMap, AbstractConstructor<IgcBaseComboBoxComponent> >(IgcBaseComboBoxComponent) )
Sets the open state of the component.
open: boolean = falseDefined in src/internals/mixins/combo-box.ts:33
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:182
The initial value of the component.
set defaultValue(value: unknown): voidDefined in src/internals/mixins/forms/types.ts:182
Parameters
- value:
unknown
Returns void
Returns the HTMLFormElement associated with this element.
get form(): HTMLFormElement | nullDefined in src/internals/mixins/forms/types.ts:46
Returns HTMLFormElement | null
required
Section titled "required"get required(): anyDefined in src/internals/mixins/forms/types.ts:207
When set, makes the component a required field for validation.
set required(value: boolean): voidDefined in src/internals/mixins/forms/types.ts:207
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:55
Returns string
validity
Section titled "validity"Returns a ValidityState object which represents the different validity states the element can be in, with respect to constraint validation.
get validity(): ValidityStateDefined in src/internals/mixins/forms/types.ts:52
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:239
Parameters
- value:
string
Returns void
willValidate
Section titled "willValidate"A boolean value which returns true if the element is a submittable element that is a candidate for constraint validation.
get willValidate(): booleanDefined in src/internals/mixins/forms/types.ts:61
Returns boolean
Methods
Section titled "Methods"checkValidity
Section titled "checkValidity"Checks for validity of the control and emits the invalid event if it's invalid.
checkValidity(): booleanDefined in src/internals/mixins/forms/types.ts:166
Returns boolean
Hides the component.
hide(): Promise<boolean>Defined in src/internals/mixins/combo-box.ts:53
Returns Promise<boolean>
reportValidity
Section titled "reportValidity"Checks for validity of the control and shows the browser message if it's invalid.
reportValidity(): booleanDefined in src/internals/mixins/forms/types.ts:169
Returns boolean
setCustomValidity
Section titled "setCustomValidity"Sets a custom validation message for the control.
As long as message is not empty, the control is considered invalid.
setCustomValidity(message: string): voidDefined in src/internals/mixins/forms/types.ts:175
Parameters
- message:
string
Returns void
Shows the component.
show(): Promise<boolean>Defined in src/internals/mixins/combo-box.ts:48
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:58