Select

Pick a framework. Both use the same recipe, so the styling matches exactly.

Select props for React
Prop	Type	Default	Description
invalid	boolean	false	Marks the value as invalid and turns the border red.

Also takes className and children. Anything else passes through to the select.

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>
  );
}

Select props for Svelte
Prop	Type	Default	Description
invalid	boolean	false	Marks the value as invalid and turns the border red.
value	string		Bindable with bind:value.

Also takes class and snippet children. Anything else passes through to the select.

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>