lion/packages/select/stories/index.stories.mdx

import { Story, Meta, html } from '@open-wc/demoing-storybook';
import { loadDefaultFeedbackMessages, Required } from '@lion/validate';

import '../lion-select.js';

<Meta title="Forms/Select" parameters={{ component: 'lion-select' }} />

# Select

[//]: # 'AUTO INSERT HEADER PREPUBLISH'

`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.

<Story name="Default">
  {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>
  `}
</Story>

```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

```sh
npm i --save @lion/select
```

```js
import '@lion/select/lion-select.js';
```

## Examples

### Pre-select

You can preselect an option by setting the property modelValue.

<Story name="Pre-select">
  {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>
  `}
</Story>

```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.

<Story name="Disabled option">
  {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>
  `}
</Story>

```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.

<Story name="Disabled select">
  {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>
  `}
</Story>

```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

<Story name="Validation">
  {() => {
    loadDefaultFeedbackMessages();
    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>
    `;
  }}
</Story>

```js
import { loadDefaultFeedbackMessages, Required } from '@lion/validate';

loadDefaultFeedbackMessages();
const validate = () => {
  const select = document.querySelector('#color');
  select.submitted = !select.submitted;
};
```

```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>
```