Select

One recipe, two bindings — rendered side by side from the same source the package ships.

React

select.demo.tsx

import { Select } from "../react/index.js";

export default function SelectDemo() {
  return (
    <div className="flex max-w-sm flex-col gap-3">
      <Select aria-label="Season" defaultValue="winter">
        <option value="winter">Winter</option>
        <option value="spring">Spring</option>
        <option value="summer">Summer</option>
        <option value="autumn">Autumn</option>
      </Select>
      <Select aria-label="Invalid choice" invalid defaultValue="">
        <option value="" disabled>
          Choose one…
        </option>
        <option value="a">Option A</option>
      </Select>
    </div>
  );
}

Svelte

select.demo.svelte

<script lang="ts">
  import { Select } from "../svelte/index.js";

  let season = $state("winter");
  let choice = $state("");
</script>

<div class="flex max-w-sm flex-col gap-3">
  <Select aria-label="Season" bind:value={season}>
    <option value="winter">Winter</option>
    <option value="spring">Spring</option>
    <option value="summer">Summer</option>
    <option value="autumn">Autumn</option>
  </Select>
  <Select aria-label="Invalid choice" invalid bind:value={choice}>
    <option value="" disabled>Choose one…</option>
    <option value="a">Option A</option>
  </Select>
</div>