dile-color-select

Select of a color from a closed list of named colors. It looks like the other dile-components selects and shows its options in an overlay, each one with a swatch of the color and its name. Its value is the chosen color.

It extends dile-select-overlay, so it has the same keyboard behavior, accessibility (ARIA combobox + listbox), form association and element-changed event. The difference is that the options come from the colors property instead of a slotted <select>.

If the user can choose any color, use dile-color-picker instead.

Installation

npm i @dile/ui

Usage

Import the component.

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

Give it the list of colors. Each color is an object with its value (any CSS color string: hex, rgb()...) and its name.

<dile-color-select
  name="color"
  label="Color"
  emptyLabel="No color"
  .colors=${[
    { value: '#fecaca', name: 'Red' },
    { value: '#bbf7d0', name: 'Green' },
    { value: '#bfdbfe', name: 'Blue' },
  ]}
></dile-color-select>

<script type="module">
  import '@dile/ui/components/select/color-select.js';
  const select = document.getElementById('colorSelectDemo');
  select.colors = [
    { value: '#e5e7eb', name: 'Gray' },
    { value: '#fecaca', name: 'Red' },
    { value: '#fde68a', name: 'Yellow' },
    { value: '#bbf7d0', name: 'Green' },
    { value: '#bfdbfe', name: 'Blue' },
    { value: '#ddd6fe', name: 'Violet' },
  ];
  select.addEventListener('element-changed', (e) => {
    document.getElementById('colorSelectDemoOutput').textContent = e.detail.value || '(none)';
  });
</script>
<dile-color-select id="colorSelectDemo" name="color" label="Tag color" emptyLabel="No color"></dile-color-select>
<p>Value: <span id="colorSelectDemoOutput">(none)</span></p>

Properties

• colors: Array of { value, name } objects, the available colors.
• emptyLabel: String. When set, adds a first "no color" option with this name and value ''.
• value: String, the chosen color. It must match one of the colors values exactly.
• name, label, placeholder, disabled, errored, message, hideErrorOnInput, quietOnStart, accessibleLabel: same as dile-select-overlay.

Events

• element-changed: when the value changes. detail: { name, value }.

Styling

Plus the dile-select-overlay custom properties (--dile-input-*, --dile-select-overlay-*...) and parts. Each swatch is exposed as the swatch part.