Color Picker

A color picker enables you to specify a color using a color picker or by entering the color into a text field.

1<template>
2    <lightning-input type="color" label="Color" value="#EEEEEE">
3    </lightning-input>
4</template>

lightning-input implements designs in the Salesforce Lightning Design System (SLDS). The input types adapt to SLDS 1 or SLDS 2 styling based on the org’s theme or the container app that you use.

To ensure a color is selected, use the required attribute. The color value must be in hexadecimal format #RRGGBB. You can also use the pattern attribute to enforce specific color format requirements.

1<template>
2  <lightning-input
3    type="color"
4    label="Brand Color"
5    value="#007bff"
6    required
7    lwc:ref="brandColor"
8    message-when-value-missing="Please select a brand color"
9  >
10  </lightning-input>
11  <lightning-button label="Submit" onclick={handleSubmit}></lightning-button>
12</template>

To validate the color input, use the checkValidity() method and access the value property to verify the color format. If the value isn’t valid, the reportValidity() method shows the error message below the input field.

1import { LightningElement } from "lwc";
2
3export default class ColorValidation extends LightningElement {
4  handleSubmit() {
5    const colorInput = this.refs.brandColor;
6    console.log(colorInput.validity.valid); // Returns true or false
7    if (!colorInput.checkValidity()) {
8      colorInput.reportValidity();
9      return;
10    }
11    // Proceed with form submission
12    const selectedColor = colorInput.value;
13  }
14}

The validity attribute returns an object with read-only boolean properties. For the color type, these attributes apply:

• badInput - Indicates that the value is a valid hexadecimal color format
• customError - Indicates that a custom error has been set using setCustomValidity()
• patternMismatch - Indicates that the value doesn’t match the specified pattern attribute
• valueMissing - Indicates that no value is provided when the required attribute is set
• valid - True if none of the preceding properties are true

To provide contextual help content, specify help text with the field-level-help attribute. Field-level help adds an info icon next to the input label, with a tooltip displaying your specified help text.

To provide sample input in the field, use the placeholder attribute. For example, in a color type field, show an example hexadecimal value.

1<template>
2    <lightning-input
3        type="color"
4        label="Primary Brand Color"
5        placeholder="#0070D2"
6        field-level-help="Select the primary color for your brand theme. This color will be used across all branded materials."
7    >
8    </lightning-input>
9    <lightning-input
10        type="color"
11        label="Accent Color"
12        placeholder="#FF9E2C"
13        field-level-help="Choose a complementary accent color. Use hexadecimal format (#RRGGBB)."
14    >
15    </lightning-input>
16</template>

Use the change event for immediate updates as the user types or select a color. Alternatively, use the commit event to handle changes only when the user presses Enter or moves focus away from the input field. See Custom Events.

1<template>
2    <lightning-input
3        type="color"
4        label="Live Preview Color"
5        value={liveColor}
6        onchange={handleColorChange}
7    >
8    </lightning-input>
9    
10    <lightning-input
11        type="color"
12        label="Confirmed Color"
13        value={confirmedColor}
14        oncommit={handleColorCommit}
15    >
16    </lightning-input>
17    
18    <p>Live preview updates continuously: {liveColor}</p>
19    <p>Confirmed color updates on Enter or blur: {confirmedColor}</p>
20</template>

The onchange event provides real-time feedback, while oncommit waits for user confirmation.

1import { LightningElement } from "lwc";
2
3export default class ColorEventExample extends LightningElement {
4  liveColor = "#0070D2";
5  confirmedColor = "#0070D2";
6
7  handleColorChange(event) {
8    // Updates continuously as user picks colors
9    this.liveColor = event.detail.value;
10  }
11
12  handleColorCommit(event) {
13    // Updates only when user presses Enter or input loses focus
14    this.confirmedColor = event.target.value;
15  }
16}

Use a combination of variants and utility classes to customize your color picker.

Use the variant attribute with one of these values to position the labels differently relative to the color picker.

• standard is the default, which displays the label above the color picker.
• label-hidden hides the label but make it available to assistive technology. If you provide a value for field-level-help, the tooltip icon is still displayed.
• label-inline aligns the label and color picker horizontally.
• label-stacked places the label above the color picker.

In most contexts, a stacked label (standard or label-stacked variant) results in better readability and clarity. Use horizontal labels (label-inline variant) when you want to conserve vertical space and have fewer than 10 fields.

To apply additional styling, use the SLDS utility classes with the class attribute.

Component styling hooks provide CSS custom properties that use the --slds-c-* prefix and they change styling for specific elements or properties of a component. Component styling hooks are supported for SLDS 1 only. See the SLDS 1 component blueprints for available component styling hooks.

For more information, see Style Components Using Lightning Design System Styling Hooks in the Lightning Web Components Developer Guide.

When you use the label attribute, the component generates a unique ID for the internal <label> and uses a standard for attribute to link it to the color field.

If you use the label-hidden variant, the component maintains the for attribute to link between the color field and the label.

If you use the field-level-help attribute, the component creates an aria-describedby link between the color field and the help tooltip.

If the color field fails validation, the component adds aria-invalid="true" and links the error message to the input by using aria-describedby.

For additional ARIA attributes that you can use, see the lightning-input Specifications tab.

change

The event fired when a value is changed in the input field.

The change event returns this event.detail parameter.

The event properties are as follows.

commit

The event fired when you press Enter after interacting with the input, or move away from the input so it loses focus.

Use event.target.value to access the input value.

The event properties are as follows.

lightning-input

For this component’s attributes and methods, see the lightning-input Specifications tab.