Select
A dropdown for choosing a single value from a list.
<script lang="ts">
import {
Select,
SelectTrigger,
SelectContent,
SelectItem
} from "$lib/components/ui/select";
let value = $state("");
</script>
<Select type="single" bind:value>
<SelectTrigger>
<span class={value ? "" : "text-(--text)/40"}
>{value || "Select a fruit"}</span
>
</SelectTrigger>
<SelectContent>
<SelectItem value="Apple">Apple</SelectItem>
<SelectItem value="Banana">Banana</SelectItem>
<SelectItem value="Blueberry">Blueberry</SelectItem>
<SelectItem value="Grapes">Grapes</SelectItem>
<SelectItem value="Pineapple">Pineapple</SelectItem>
</SelectContent>
</Select>Installation
Install the lily base and `utils` (run once per project).
npx lily-svelte@latest initCopy 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>