Select

Standard select menu which expects child <Option> components.

Example

Select option from the list of options. Use bind:value to bind the selected value to a variable.

<script>
  import { Select } from "$lib/ui";
  let pet = $state();
</script>

<Select label="Pet" name="pet" bind:value={pet}>
  <Option label="Dog" value="dog" />
  <Option label="Hamster" value="hamster" />
  <Option label="Parrot" value="parrot" />
</Select>

<p>Pet: {pet}</p>

Pet:

Name

Name of the select element which will be used as the key in the form data.

<Select name="direction">
  <Option label="Up" value="up" />
  <Option label="Down" value="down" />
</Select>

Label

Label for the select element.

<Select label="Direction">
  <Option label="Up" value="up" />
  <Option label="Down" value="down" />
</Select>

Init

Initial option shown for the select element. Default is “Select”. Set the value to "false" or {false} to remove the initial option.

<Select init="Choose up or down">
  <Option label="Up" value="up" />
  <Option label="Down" value="down" />
</Select>

Disabled

Disable the select element.

<Select name="direction" disabled>
  <Option label="Up" value="up" />
  <Option label="Down" value="down" />
</Select>

Error

Display error message below the select element. Also adds error styles to the select element.

<Select label="Color" error="Must select a color">
  <Option label="Blue" value="blue" />
  <Option label="Red" value="red" />
  <Option label="Green" value="green" />
  <Option label="Yellow" value="yellow" />
</Select>

Note

Display note message below the select element.

<Select note="We'd like to know">
  <Option label="Blue" value="blue" />
  <Option label="Red" value="red" />
  <Option label="Green" value="green" />
  <Option label="Yellow" value="yellow" />
</Select>

Select Component Props

Select CSS Custom Properties