Skip to main content

MultiSelect

MultiSelect

Select multiple options from a dropdown list

Tags: component form selection

View Demo

MultiSelect allows users to select multiple options from a dropdown menu.

Import​

<script>
  import { MultiSelect } from '@classic-homes/theme-svelte';
</script>

Basic Usage​

<script>
  let selected = $state([]);

  const options = [
    { value: 'react', label: 'React' },
    { value: 'svelte', label: 'Svelte' },
    { value: 'vue', label: 'Vue' },
    { value: 'angular', label: 'Angular' },
  ];
</script>

<MultiSelect {options} bind:value={selected} placeholder="Select frameworks..." />

Props​

Prop Type Default Description
value string[] [] Selected values (bindable)
options MultiSelectOption[] Required Array of options
placeholder string 'Select options...' Placeholder text
emptyMessage string 'No results found.' Message when no options match
disabled boolean false Disables the select
required boolean false Marks as required
name string - Name attribute for forms
id string - Element ID (auto-generated if empty)
label string - Label text
hint string - Hint text below the input
error string - Error message
max number - Maximum selections allowed
loading boolean false Shows loading state
debounceMs number 300 Debounce time for search
onValueChange (value: string[]) => void - Callback when value changes
onSearch (query: string) => void - Callback for search queries
class string - Additional CSS classes

With Label and Hint​

<MultiSelect label="Skills" hint="Select all that apply" {options} bind:value={selected} />

Max Selections​

Limit the number of selections:

<MultiSelect
  label="Choose 3"
  {options}
  bind:value={selected}
  max={3}
  hint="Select up to 3 options"
/>

Selected as Tags​

Selected items appear as removable tags:

<MultiSelect {options} bind:value={selected} placeholder="Add tags..." />

Validation​

<MultiSelect
  label="Categories"
  {options}
  bind:value={selected}
  required
  error={selected.length === 0 ? 'Select at least one option' : ''}
/>

Accessibility​

The MultiSelect component includes:

  • Full keyboard navigation
  • ARIA listbox pattern
  • Screen reader announcements
  • Focus management
  • Auto-generated IDs link labels to inputs
  • aria-describedby connects hint and error messages
  • aria-invalid set when error is present

Examples​

Tag Selector​

<script>
  let tags = $state([]);
  const tagOptions = [
    { value: 'urgent', label: 'Urgent' },
    { value: 'bug', label: 'Bug' },
    { value: 'feature', label: 'Feature' },
    { value: 'docs', label: 'Documentation' },
  ];
</script>

<MultiSelect
  label="Tags"
  hint="Add relevant tags"
  options={tagOptions}
  bind:value={tags}
  placeholder="Add tags..."
/>

Team Members​

<MultiSelect
  label="Assign to"
  hint="Select team members to assign this task"
  options={teamMembers}
  bind:value={assignees}
  max={5}
  placeholder="Select team members..."
/>
On this page