lion/packages/select

Select

lion-select component is a wrapper around the native select.

You cannot use interactive elements inside the options. Avoid very long names to facilitate the understandability and perceivability for screen reader users. Sets of options where each option name starts with the same word or phrase can also significantly degrade usability for keyboard and screen reader users.

import { html } from 'lit-html';
import { Required } from '@lion/form-core';
import { loadDefaultFeedbackMessages } from '@lion/validate-messages';

import './lion-select.js';

export default {
  title: 'Forms/Select',
};
loadDefaultFeedbackMessages();

export const main = () => html`
  <lion-select name="favoriteColor" label="Favorite color">
    <select slot="input">
      <option selected hidden value>Please select</option>
      <option value="red">Red</option>
      <option value="hotpink">Hotpink</option>
      <option value="teal">Teal</option>
    </select>
  </lion-select>
`;

For this form element it is important to put the slot="input" with the native select yourself, because you are responsible for filling it with <option>s. For most other form elements in lion we do this for you, because there's no need to put html inside the native form inputs.

Features

• Catches and forwards the select events
• Can be set to required or disabled

How to use

Installation

npm i --save @lion/select

import { LionSelect } from '@lion/select';
// or
import '@lion/select/lion-select.js';

Examples

Pre-select

You can preselect an option by setting the property modelValue.

export const preSelect = () => html`
  <lion-select name="favoriteColor" label="Favorite color" .modelValue=${'hotpink'}>
    <select slot="input">
      <option selected hidden value>Please select</option>
      <option value="red">Red</option>
      <option value="hotpink">Hotpink</option>
      <option value="teal">Teal</option>
    </select>
  </lion-select>
`;

Disabled

You can disable an option by adding the disabled attribute to an option.

export const disabledOption = () => html`
  <lion-select name="favoriteColor" label="Favorite color">
    <select slot="input">
      <option selected hidden value>Please select</option>
      <option value="red">Red</option>
      <option value="hotpink" disabled>Hotpink</option>
      <option value="teal">Teal</option>
    </select>
  </lion-select>
`;

Or by setting the disabled attribute on the entire lion-select field.

export const disabledSelect = () => html`
  <lion-select name="favoriteColor" label="Favorite color" disabled>
    <select slot="input">
      <option selected hidden value>Please select</option>
      <option value="red">Red</option>
      <option value="hotpink">Hotpink</option>
      <option value="teal">Teal</option>
    </select>
  </lion-select>
`;

Validation

export const validation = () => {
  const validate = () => {
    const select = document.querySelector('#color');
    select.submitted = !select.submitted;
  };
  return html`
    <lion-select id="color" name="color" .validators="${[new Required()]}">
      <label slot="label">Favorite color</label>
      <select slot="input">
        <option selected hidden value>Please select</option>
        <option value="red">Red</option>
        <option value="hotpink">Hotpink</option>
        <option value="teal">Teal</option>
      </select>
    </lion-select>
    <button @click="${() => validate()}">Validate</button>
  `;
};