Select

Use select for picking one option from a custom popover list (not native HTML select). Set type="single" and bind value. Compose Trigger, Content, Group, Label, and Item.

1<script lang="ts">
2	import * as Select from '~/components/select';
3
4	const fruits = [
5		{ value: 'apple', label: 'Apple' },
6		{ value: 'banana', label: 'Banana' },
7		{ value: 'blueberry', label: 'Blueberry' }
8	];
9
10	let value = $state('');
11
12	const triggerContent = $derived(fruits.find((f) => f.value === value)?.label ?? 'Select a fruit');
13</script>
14
15<Select.Root type="single" name="favoriteFruit" bind:value>
16	<Select.Trigger class="w-[180px]">
17		{triggerContent}
18	</Select.Trigger>
19	<Select.Content>
20		<Select.Group>
21			<Select.Label>Fruits</Select.Label>
22			{#each fruits as fruit (fruit.value)}
23				<Select.Item value={fruit.value} label={fruit.label}>
24					{fruit.label}
25				</Select.Item>
26			{/each}
27		</Select.Group>
28	</Select.Content>
29</Select.Root>