dile-color-picker

Color picker Web Component. Shows a swatch button that opens a panel with a saturation/brightness square, a hue slider and a hex text field, and behaves like any other dile-* form field.

<dile-color-picker label="Pick a color" name="color"></dile-color-picker>

Install

npm install @dile/ui

Usage

Import the component.

import '@dile/ui/components/color-picker/color-picker.js';

Use the component

<dile-color-picker
  name="color"
  label="Favorite color"
  value="#3366ff"
></dile-color-picker>

Properties

• name: the name of the field. This helps identify which element triggered an event, and is the field name used on form submission.
• label: the element label
• value: the current color, as a 6-digit hex string (e.g. #3366ff). Defaults to #000000. A 3-digit shorthand (e.g. #36f) is accepted and automatically normalized to its 6-digit form.
• disabled: when true, the element is disabled
• readonly: when true, is not editable
• errored: when true, the element is marked as error
• message: optionally, the element can display a message
• hideErrorOnInput: when true, the errored state turns off when the user changes the value and the message is cleared
• focusOnStart: when true, set application focus to this component after initialization

Form Integration

This component is a form-associated element, meaning it integrates seamlessly with native HTML forms. The value is automatically synchronized with the form state, so it can be read from a submitted FormData using the name property, exactly like dile-input.

Useful Methods

• focus(): focus the trigger swatch button
• clearError(): removes the errored state and clears the error message
• open(): opens the color picker panel
• close(): closes the color picker panel
• toggle(): opens or closes the color picker panel depending on its current state

Events

• element-changed: dispatched when the value changes. The event detail carries the element name and value properties.

colorField.addEventListener('element-changed', (e) => {
  console.log('element-changed event, value: ', e.detail.value);
});

• overlay-opened / overlay-closed: dispatched when the color picker panel opens or closes.

Styling

dile-color-picker demos

Default

<script type="module">
import '@dile/ui/components/color-picker/color-picker.js';
</script>
<dile-color-picker
  name="color"
  label="Favorite color"
  value="#3366ff"
></dile-color-picker>

Inside a form

<script type="module">
import { LitElement, html, css } from 'lit';

class MyComponent extends LitElement {
  static get properties() {
    return { result: { type: String } };
  }
  constructor() {
    super();
    this.result = '';
  }
  render() {
    return html`
      <form @submit="${this._onSubmit}">
        <dile-color-picker name="color" label="Brand color" value="#7bb93d"></dile-color-picker>
        <button type="submit">Save</button>
      </form>
      <p>${this.result}</p>
    `;
  }
  _onSubmit(e) {
    e.preventDefault();
    const data = new FormData(e.target);
    this.result = 'Submitted color: ' + data.get('color');
  }
}
customElements.define('my-component', MyComponent);
</script>
<my-component></my-component>

Errored

<dile-color-picker
  name="color"
  label="Favorite color"
  value="#ff0000"
  errored
  message="Please choose a different color"
></dile-color-picker>

Disabled

<dile-color-picker
  name="color"
  label="Favorite color"
  value="#888888"
  disabled
></dile-color-picker>

Read only

<dile-color-picker
  name="color"
  label="Favorite color"
  value="#7bb93d"
  readonly
></dile-color-picker>

Styled

<style>
.styled {
  --dile-input-label-color: #6d3d6c;
  --dile-input-label-font-weight: bold;
  --dile-color-picker-swatch-border-radius: 50%;
  --dile-color-picker-swatch-size: 2.5em;
  --dile-color-picker-panel-border-radius: 12px;
}
</style>
<dile-color-picker class="styled" name="color" label="Styled" value="#c2185b"></dile-color-picker>