Select
Forms bits-uiA frosted-glass dropdown with highlighted items.
Example
<script lang="ts">
import * as Select from '$lib/components/ui/select';
const sources = [
{ value: 'ocean', label: 'Ocean' },
{ value: 'lake', label: 'Lake' },
{ value: 'river', label: 'River' },
{ value: 'rain', label: 'Rain' }
];
let value = $state('');
const selectedLabel = $derived(sources.find((s) => s.value === value)?.label);
</script>
<Select.Root type="single" bind:value>
<Select.Trigger class="w-56">
{selectedLabel ?? 'Pick a water source'}
</Select.Trigger>
<Select.Content>
{#each sources as source (source.value)}
<Select.Item value={source.value} label={source.label}>
{source.label}
</Select.Item>
{/each}
</Select.Content>
</Select.Root>Installation
npx shadcn-svelte@latest add https://mizu-ui.com/r/select.json