Select

A premium option picker combining the robust aria-accessibility standards of Bits UI with Grgurevic UI's custom glassmorphic trigger buttons and smooth slide-out dropdown boxes.

Preview

Ice Cream Flavor Picker

Selected Value: vanilla (Vanilla 🍦)

Svelte Composition Code

<script lang="ts">
	import * as Select from "$lib/components/ui/select";
	let selectValue = $state("vanilla");
</script>

<Select.Root bind:value={selectValue} type="single">
	<Select.Trigger class="w-full max-w-xs">
		{selectedLabel || "Select a flavor..."}
	</Select.Trigger>
	<Select.Content>
		<Select.Item value="chocolate" label="Chocolate 🍫" />
		<Select.Item value="vanilla" label="Vanilla 🍦" />
		<Select.Item value="strawberry" label="Strawberry 🍓" />
	</Select.Content>
</Select.Root>

API & Sub-components Reference

Select.Root

The master coordinator. Connects option items, active triggers, and keyboard focus states.

• value: string - Two-way bindable selected value.
• type: "single" - Standard selection mode profile.

Select.Trigger

The tactile button displaying the selected option label that slides out the item picker list on clicking.

Select.Content

The floating glass card enclosing option items, styled with backdrop filters and shadows.

Select.Item

Clickable option element. Automatically appends trailing checkmarks when selected.