Sivir UI
Studio 64

Select

A dropdown for choosing one option from a short list.

Priority

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add select

Usage

Import Select and use it in your component:

import * as Select from '$lib/sivir/components/select';

<Select.Root value={role}>
  <Select.Trigger>Designer</Select.Trigger>
  <Select.Content>
    <Select.Item value="designer">Designer</Select.Item>
  </Select.Content>
</Select.Root>

Examples

Select in common configurations.

Basic

Priority

Scrollable

Long option lists stay in a height-capped menu and scroll inside it.

Timezone

Dynamic width

The menu sizes to its longest option plus a buffer, 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.