Select

<wa-select label="Coffee order" placeholder="How do you take it?">
  <wa-option value="espresso">Espresso</wa-option>
  <wa-option value="latte">Latte</wa-option>
  <wa-option value="cappuccino">Cappuccino</wa-option>
  <wa-option value="cold-brew">Cold brew</wa-option>
  <wa-option value="drip">Drip</wa-option>
</wa-select>

<wa-select label="Country">
  <wa-option value="us">United States</wa-option>
  <wa-option value="ca">Canada</wa-option>
  <wa-option value="mx">Mexico</wa-option>
</wa-select>

<wa-select label="Experience" hint="Tell us how comfortable you are with the command line.">
  <wa-option value="1">Novice</wa-option>
  <wa-option value="2">Intermediate</wa-option>
  <wa-option value="3">Advanced</wa-option>
</wa-select>

<wa-select placeholder="Select one">
  <wa-option value="option-1">Option 1</wa-option>
  <wa-option value="option-2">Option 2</wa-option>
  <wa-option value="option-3">Option 3</wa-option>
</wa-select>

<div class="wa-stack">
  <wa-select appearance="outlined" value="outlined">
    <wa-option value="outlined">outlined</wa-option>
  </wa-select>
  <wa-select appearance="filled" value="filled">
    <wa-option value="filled">filled</wa-option>
  </wa-select>
  <wa-select appearance="filled-outlined" value="filled-outlined">
    <wa-option value="filled-outlined">filled-outlined</wa-option>
  </wa-select>
</div>

<wa-select pill placeholder="Select one">
  <wa-option value="option-1">Option 1</wa-option>
  <wa-option value="option-2">Option 2</wa-option>
  <wa-option value="option-3">Option 3</wa-option>
</wa-select>

<div class="wa-stack">
  <wa-select size="xs" placeholder="Extra small">
    <wa-option value="option-1">Option 1</wa-option>
    <wa-option value="option-2">Option 2</wa-option>
  </wa-select>
  <wa-select size="s" placeholder="Small">
    <wa-option value="option-1">Option 1</wa-option>
    <wa-option value="option-2">Option 2</wa-option>
  </wa-select>
  <wa-select size="m" placeholder="Medium">
    <wa-option value="option-1">Option 1</wa-option>
    <wa-option value="option-2">Option 2</wa-option>
  </wa-select>
  <wa-select size="l" placeholder="Large">
    <wa-option value="option-1">Option 1</wa-option>
    <wa-option value="option-2">Option 2</wa-option>
  </wa-select>
  <wa-select size="xl" placeholder="Extra large">
    <wa-option value="option-1">Option 1</wa-option>
    <wa-option value="option-2">Option 2</wa-option>
  </wa-select>
</div>

<wa-select placeholder="Disabled" disabled>
  <wa-option value="option-1">Option 1</wa-option>
  <wa-option value="option-2">Option 2</wa-option>
  <wa-option value="option-3">Option 3</wa-option>
</wa-select>

<wa-select with-clear value="option-1">
  <wa-option value="option-1">Option 1</wa-option>
  <wa-option value="option-2">Option 2</wa-option>
  <wa-option value="option-3">Option 3</wa-option>
</wa-select>

<wa-select label="Notify me about" multiple with-clear>
  <wa-option value="mentions" selected>Mentions</wa-option>
  <wa-option value="replies" selected>Replies</wa-option>
  <wa-option value="reactions">Reactions</wa-option>
  <wa-option value="follows">New followers</wa-option>
  <wa-option value="releases">Releases</wa-option>
</wa-select>

<wa-select label="Default branch">
  <wa-option value="main" selected>main</wa-option>
  <wa-option value="develop">develop</wa-option>
  <wa-option value="staging">staging</wa-option>
</wa-select>

<wa-select label="Add a language" placeholder="Select one">
  <small>Frontend</small>
  <wa-option value="ts">TypeScript</wa-option>
  <wa-option value="css">CSS</wa-option>
  <wa-divider></wa-divider>
  <small>Backend</small>
  <wa-option value="go">Go</wa-option>
  <wa-option value="rust">Rust</wa-option>
  <wa-option value="python">Python</wa-option>
</wa-select>

<wa-select placement="top" placeholder="Opens upward">
  <wa-option value="option-1">Option 1</wa-option>
  <wa-option value="option-2">Option 2</wa-option>
  <wa-option value="option-3">Option 3</wa-option>
</wa-select>

<wa-select label="Destination" placeholder="Where to?" with-clear>
  <wa-icon slot="start" name="plane-departure" variant="solid"></wa-icon>
  <wa-option value="lax">Los Angeles</wa-option>
  <wa-option value="jfk">New York</wa-option>
  <wa-option value="nrt">Tokyo</wa-option>
</wa-select>

<wa-select placeholder="Select one" multiple with-clear class="custom-tag">
  <wa-option value="email" selected>
    <wa-icon slot="start" name="envelope" variant="solid"></wa-icon>
    Email
  </wa-option>
  <wa-option value="phone" selected>
    <wa-icon slot="start" name="phone" variant="solid"></wa-icon>
    Phone
  </wa-option>
  <wa-option value="chat">
    <wa-icon slot="start" name="comment" variant="solid"></wa-icon>
    Chat
  </wa-option>
</wa-select>

<script type="module">
  await customElements.whenDefined('wa-select');
  const select = document.querySelector('.custom-tag');
  await select.updateComplete;

  select.getTag = (option, index) => {
    // Reuse the icon from the matching wa-option
    const name = option.querySelector('wa-icon[slot="start"]').name;

    // Return a string, a Lit Template, or an HTMLElement.
    // Include data-value so the tag can be removed properly.
    return `
      <wa-tag with-remove data-value="${option.value}">
        <wa-icon name="${name}"></wa-icon>
        ${option.label}
      </wa-tag>
    `;
  };
</script>

<form id="lazy-options-example">
  <div>
    <wa-select name="select-1" value="foo" label="Single select (with existing options)">
      <wa-option value="bar">Bar</wa-option>
      <wa-option value="baz">Baz</wa-option>
    </wa-select>

    <wa-divider></wa-divider>

    <wa-button appearance="filled" type="button">Add "foo" option</wa-button>
  </div>

  <br />

  <div>
    <wa-select name="select-2" value="foo" label="Single select (with no existing options)"> </wa-select>

    <wa-divider></wa-divider>

    <wa-button appearance="filled" type="button">Add "foo" option</wa-button>
  </div>

  <br />

  <div>
    <wa-select name="select-3" multiple label="Multiple select (with existing selected options)">
      <wa-option value="bar" selected>Bar</wa-option>
      <wa-option value="baz" selected>Baz</wa-option>
    </wa-select>

    <wa-divider></wa-divider>

    <wa-button appearance="filled" type="button">Add "foo" option (selected)</wa-button>
  </div>

  <br />

  <div>
    <wa-select name="select-4" value="foo" multiple label="Multiple select (with no existing options)"> </wa-select>

    <wa-divider></wa-divider>

    <wa-button appearance="filled" type="button">Add "foo" option</wa-button>
  </div>

  <br /><br />

  <div style="display: flex; gap: 16px;">
    <wa-button appearance="filled" type="reset">Reset</wa-button>
    <wa-button appearance="filled" type="submit" variant="neutral">Show FormData</wa-button>
  </div>

  <br />

  <pre hidden><code id="lazy-options-example-form-data"></code></pre>

  <br />
</form>

<script type="module">
  function addFooOption(e) {
    const addFooButton = e.target.closest("wa-button[type='button']");
    if (!addFooButton) {
      return;
    }
    const select = addFooButton.parentElement.querySelector('wa-select');

    if (select.querySelector("wa-option[value='foo']")) {
      // Foo already exists. no-op.
      return;
    }

    const option = document.createElement('wa-option');
    option.setAttribute('value', 'foo');
    option.selected = true;
    option.innerText = 'Foo';

    // For the multiple select with existing selected options, make the new option selected
    if (select.getAttribute('name') === 'select-3') {
      option.selected = true;
    }

    select.append(option);
  }

  function handleLazySubmit(event) {
    event.preventDefault();

    const formData = new FormData(event.target);
    const codeElement = document.querySelector('#lazy-options-example-form-data');

    const obj = {};
    for (const key of formData.keys()) {
      const val = formData.getAll(key).length > 1 ? formData.getAll(key) : formData.get(key);
      obj[key] = val;
    }

    codeElement.textContent = JSON.stringify(obj, null, 2);

    const preElement = codeElement.parentElement;
    preElement.removeAttribute('hidden');
  }

  const container = document.querySelector('#lazy-options-example');
  container.addEventListener('click', addFooOption);
  container.addEventListener('submit', handleLazySubmit);
</script>