Select

Usage

<script lang="ts">
  import { Select, SelectTrigger, SelectContent, SelectItem } from '$lib/components/select';
 
  const roles = [
    { value: 'admin', label: 'Admin' },
    { value: 'editor', label: 'Editor' },
    { value: 'reviewer', label: 'Reviewer' },
    { value: 'guest', label: 'Guest' }
  ];
</script>

<Select>
  <SelectTrigger placeholder="Assign user role" />
  <SelectContent>
    {#each roles as role}
      <SelectItem value={role.value} label={role.label}>
        {role.label}
      </SelectItem>
    {/each}
  </SelectContent>
</Select>

Properties

The Select component extends the Bits UI <Select> component. Find the full list of available properties in the official Bits UI documentation.

SelectTrigger

SelectItem

Examples

Header

Use the SelectHeader component to add a header inside the SelectContent or within a SelectGroup when using grouped options.

Icon support

Use the icon property to add an icon to either the SelectTrigger or SelectItem component.

Description

Use the Description component inside the SelectItem component to provide additional information about the select item.

Sublabel

Use the Sublabel component inside the SelectItem component to add a secondary label to the select item.

Group

Use the SelectGroup component inside SelectContent to group related options together.

Disabled

Use the disabled property to prevent users from interacting with the select.

Disabled item

Use the disabled property inside the SelectItem component to prevent users from interacting with the select item.