Select

The menu opens with focus on the selected option, and arrow keys, Home, and End move between options. Use a Combobox when people need to search the list.

Priority

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add select

Usage

Bind value on Select.Root; it is an empty string until an option is picked. An empty trigger shows the selected option's text. Add Select.Value inside it to set the placeholder.

import * as Select from '@sivir-ui/svelte/components/select';

let role = $state('');

<Select.Root bind:value={role}>
  <Select.Trigger>
    <Select.Value placeholder="Choose a role" />
  </Select.Trigger>
  <Select.Content>
    <Select.Item value="designer">Designer</Select.Item>
    <Select.Item value="engineer">Engineer</Select.Item>
  </Select.Content>
</Select.Root>

Examples

Basic

Priority

Scrollable

Add a max-h-* class to Select.Content to cap the menu height. Longer lists scroll inside it.

Timezone

Dynamic width

Set dynamic on Select.Content to size the menu to its longest option, even when the trigger is narrower.

Role

Anatomy

Select.Root - Provides select state.

Select.Trigger - Opens the select menu.

Select.Value - Displays the selected value.

Select.Label - Labels a select section.

Select.Item - Defines a selectable option.

Select.Content - Renders select options.