<tw-select label="Shoe Size">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</tw-select>

<tw-select
  label="Shoe Size"
  value="1">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</tw-select>

<tw-select
  label="Shoe Size"
  required>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</tw-select>

<tw-select
  label="Shoe Size"
  expand>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</tw-select>

<tw-select
  label="Shoe Size"
  error="This field is incorrect.">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</tw-select>

<tw-select
  label="Shoe Size"
  disabled>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</tw-select>

<tw-select
  label="Variants"
  value="1">
  <option value="1" data-thumbnail="https://picsum.photos/seed/v1/48/48">Variant - 1</option>
  <option value="2" data-thumbnail="https://picsum.photos/seed/v2/48/48">Variant - 2</option>
  <option value="3" data-thumbnail="https://picsum.photos/seed/v3/48/48">Variant - 3</option>
</tw-select>

<tw-select multiple label="Categories">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
</tw-select>

<tw-select multiple expand label="Categories">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
</tw-select>

<p id="result" class="tw-margin-be-s tw-font-weight-medium">No city added yet</p>

<tw-select searchable expand label="City">
  <option value="1">Amsterdam</option>
  <option value="2">Berlin</option>
  <option value="3">Brussels</option>
  <option value="4">Copenhagen</option>
  <option value="5">Dublin</option>
  <option value="6">Helsinki</option>
  <option value="7">Lisbon</option>
  <option value="8">London</option>
  <option value="9">Madrid</option>
  <option value="10">Milan</option>
  <option value="11">Munich</option>
  <option value="12">Oslo</option>
  <option value="13">Paris</option>
  <option value="14">Prague</option>
  <option value="15">Rome</option>
  <option value="16">Stockholm</option>
  <option value="17">Vienna</option>
  <option value="18">Warsaw</option>
  <option value="19">Zurich</option>
  <option value="20">Athens</option>
  <p
    slot="footer"
    style="margin: 0; cursor: pointer; color: var(--tw-color-primary);">
    + Add new city
  </p>
</tw-select>

<script>
  const footerAction = document.querySelector('tw-select [slot="footer"]');
  const result = document.getElementById("result");
  footerAction.addEventListener("click", () =>
    result.innerText = "The footer action was clicked, the parent decides what happens next (e.g. open a form to add a new city).");
</script>