Multi Select
Several values from a list, in one field.
Walkthrough
1. Basic
Type to filter, Enter to take one, Backspace on an empty box to give it back.
<script lang="ts"> import { MultiSelect } from 'omaris'; let labels = $state(['bug', 'docs']); const LABELS = [ { value: 'bug', label: 'Bug', description: "Something isn't working" }, { value: 'feature', label: 'Feature', description: 'A new capability' }, { value: 'docs', label: 'Documentation', keywords: ['readme', 'guide'] }, { value: 'design', label: 'Design' }, { value: 'a11y', label: 'Accessibility', keywords: ['aria'] } ];</script><div class="w-80 max-w-full"> <MultiSelect options={LABELS} bind:values={labels} label="Labels" placeholder="Pick a few" /></div>2. Groups
Grouped rows, a "Select all" header and a cap the counter tracks.
1/3
<script lang="ts"> import { MultiSelect } from 'omaris'; let reviewers = $state<string[]>(['ada']); const PEOPLE = [ { value: 'ada', label: 'Ada Lovelace', group: 'Engineering' }, { value: 'grace', label: 'Grace Hopper', group: 'Engineering' }, { value: 'alan', label: 'Alan Turing', group: 'Engineering' }, { value: 'katherine', label: 'Katherine Johnson', group: 'Research' }, { value: 'mary', label: 'Mary Jackson', group: 'Research' } ];</script><div class="w-80 max-w-full"> <MultiSelect options={PEOPLE} bind:values={reviewers} label="Reviewers" placeholder="Search people" max={3} selectAll /></div>3. Narrow
Two answers to a field too narrow for chips: collapse after the second, or drop them for a count.
<script lang="ts"> import { MultiSelect } from 'omaris'; const LABELS = [ { value: 'bug', label: 'Bug' }, { value: 'feature', label: 'Feature' }, { value: 'docs', label: 'Documentation' }, { value: 'design', label: 'Design' } ]; let collapsed = $state(['bug', 'feature', 'docs']); let counted = $state(['bug', 'feature', 'docs']);</script><div class="flex w-64 max-w-full flex-col gap-4"> <MultiSelect options={LABELS} bind:values={collapsed} collapse={2} label="Collapsed" /> <MultiSelect options={LABELS} bind:values={counted} display="count" label="Counted" /></div>4. Creatable
Nothing matches what was typed, so the field offers to add it.
<script lang="ts"> import { MultiSelect } from 'omaris'; let tags = $state(['svelte']);</script><div class="w-80 max-w-full"> <MultiSelect options={[ { value: 'svelte', label: 'svelte' }, { value: 'tailwind', label: 'tailwind' }, { value: 'typescript', label: 'typescript' } ]} bind:values={tags} creatable label="Tags" placeholder="Type to add" /></div>5. Overridden
Square accent chips, a tinted list and a taller frame.
<script lang="ts"> import { MultiSelect } from 'omaris'; let values = $state(['bug', 'docs']);</script><div class="w-80 max-w-full"> <MultiSelect options={[ { value: 'bug', label: 'Bug' }, { value: 'docs', label: 'Documentation' }, { value: 'design', label: 'Design' } ]} bind:values label="Overridden" classes={{ chip: 'rounded-sm bg-primary-container text-primary-container-foreground', surface: 'bg-surface-container-low', field: 'min-h-14' }} /></div>