Select

A dropdown for choosing a single value from a list.

Installation

npx lily-svelte@latest add select

Installs the style saved in lily.json. For a new Diamond project, run lily-svelte init --style diamond first.

Install the lily base and `utils` (run once per project).

npx lily-svelte@latest init

Copy the select source from the registry into `$lib/components/ui/select`.

Usage

<script lang="ts">
	import { Select, SelectTrigger, SelectContent, SelectItem } from '$lib/components/ui/select';
 
	let value = $state('');
</script>
 
<Select type="single" bind:value>
	<SelectTrigger>{value || 'Select a fruit'}</SelectTrigger>
	<SelectContent>
		<SelectItem value="Apple">Apple</SelectItem>
		<SelectItem value="Banana">Banana</SelectItem>
	</SelectContent>
</Select>

Groups

Once a select holds more than a handful of options, group them under headings. SelectSeparator draws a rule between groups.

<SelectContent>
	<SelectGroup>
		<SelectGroupHeading>Asia</SelectGroupHeading>
		<SelectItem value="Seoul">Seoul</SelectItem>
		<SelectItem value="Tokyo">Tokyo</SelectItem>
	</SelectGroup>
	<SelectSeparator />
	<SelectGroup>
		<SelectGroupHeading>Europe</SelectGroupHeading>
		<SelectItem value="London">London</SelectItem>
	</SelectGroup>
</SelectContent>

SelectGroupHeading is a label, not an option — it is skipped by keyboard navigation and announced as the group's name for the items under it.