Combobox
Forms bits-uiA searchable select in frosted glass.
Example
<script lang="ts">
import * as Combobox from '$lib/components/ui/combobox';
const sources = [
{ value: 'spring', label: 'Spring water' },
{ value: 'ocean', label: 'Ocean' },
{ value: 'lake', label: 'Lake' },
{ value: 'river', label: 'River' },
{ value: 'rain', label: 'Rainfall' },
{ value: 'glacier', label: 'Glacier melt' }
];
let value = $state('');
let search = $state('');
const filtered = $derived(
search ? sources.filter((s) => s.label.toLowerCase().includes(search.toLowerCase())) : sources
);
</script>
<Combobox.Root type="single" bind:value name="source">
<div class="relative w-64">
<Combobox.Input
oninput={(e) => (search = e.currentTarget.value)}
placeholder="Search water sources..."
class="pr-9"
/>
<Combobox.Trigger aria-label="Toggle sources" />
</div>
<Combobox.Content>
<Combobox.Group>
<Combobox.GroupHeading>Sources</Combobox.GroupHeading>
{#each filtered as source (source.value)}
<Combobox.Item value={source.value} label={source.label}>
{source.label}
</Combobox.Item>
{/each}
</Combobox.Group>
</Combobox.Content>
</Combobox.Root>Installation
npx shadcn-svelte@latest add https://mizu-ui.com/r/combobox.json