Multi-Select
Material Design 3 multiple selection dropdown component with tags
Multi-Select
Multi-Select allows users to select multiple options from a dropdown list. Selected items are displayed as removable tags. Uses the native HTML Popover API for dropdown behavior.
Basic Usage
Basic Multi-Select
html
<div class="multi-select">
<button class="multi-select-trigger" popovertarget="multi-select-1">
<span class="multi-select-placeholder">Select options</span>
<svg class="multi-select-arrow" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
<div class="multi-select-dropdown" id="multi-select-1" popover="auto">
<div class="multi-select-options">
<div class="multi-select-option">Option 1</div>
<div class="multi-select-option">Option 2</div>
<div class="multi-select-option">Option 3</div>
</div>
</div>
</div>With Selections
Multi-Select with Tags
html
<div class="multi-select">
<button class="multi-select-trigger" popovertarget="multi-select-tags">
<div class="multi-select-tags">
<span class="multi-select-tag">
React
<button class="multi-select-tag-remove" aria-label="Remove React">×</button>
</span>
<span class="multi-select-tag">
Vue
<button class="multi-select-tag-remove" aria-label="Remove Vue">×</button>
</span>
<span class="multi-select-tag">
Angular
<button class="multi-select-tag-remove" aria-label="Remove Angular">×</button>
</span>
</div>
<svg class="multi-select-arrow" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
<div class="multi-select-dropdown" id="multi-select-tags" popover="auto">
<div class="multi-select-options">
<div class="multi-select-option multi-select-option-selected">
<span class="multi-select-option-checkbox">✓</span>
React
</div>
<div class="multi-select-option multi-select-option-selected">
<span class="multi-select-option-checkbox">✓</span>
Vue
</div>
<div class="multi-select-option multi-select-option-selected">
<span class="multi-select-option-checkbox">✓</span>
Angular
</div>
<div class="multi-select-option">
<span class="multi-select-option-checkbox"></span>
Svelte
</div>
</div>
</div>
</div>With Search
Multi-Select with Search
html
<div class="multi-select">
<button class="multi-select-trigger" popovertarget="multi-select-search">
<div class="multi-select-tags">
<span class="multi-select-tag">React</span>
<input type="text" class="multi-select-input" placeholder="Search..." />
</div>
<svg class="multi-select-arrow" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
<div class="multi-select-dropdown" id="multi-select-search" popover="auto">
<div class="multi-select-search">
<input type="text" class="multi-select-search-input" placeholder="Search options..." />
</div>
<div class="multi-select-options">
<div class="multi-select-option multi-select-option-selected">
<span class="multi-select-option-checkbox">✓</span>
React
</div>
<div class="multi-select-option">
<span class="multi-select-option-checkbox"></span>
Vue
</div>
<div class="multi-select-option">
<span class="multi-select-option-checkbox"></span>
Angular
</div>
</div>
</div>
</div>Variants
Outlined (Default)
Outlined Multi-Select
html
<div class="multi-select multi-select-outlined">
<button class="multi-select-trigger" popovertarget="multi-select-outlined">
<span class="multi-select-placeholder">Select frameworks</span>
<svg class="multi-select-arrow" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
<div class="multi-select-dropdown" id="multi-select-outlined" popover="auto">
<div class="multi-select-options">
<div class="multi-select-option">React</div>
<div class="multi-select-option">Vue</div>
<div class="multi-select-option">Angular</div>
</div>
</div>
</div>Filled
Filled Multi-Select
html
<div class="multi-select multi-select-filled">
<button class="multi-select-trigger" popovertarget="multi-select-filled">
<span class="multi-select-placeholder">Select frameworks</span>
<svg class="multi-select-arrow" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
<div class="multi-select-dropdown" id="multi-select-filled" popover="auto">
<div class="multi-select-options">
<div class="multi-select-option">React</div>
<div class="multi-select-option">Vue</div>
<div class="multi-select-option">Angular</div>
</div>
</div>
</div>Sizes
Small
Small Multi-Select
html
<div class="multi-select multi-select-sm">
<button class="multi-select-trigger" popovertarget="multi-select-sm">
<div class="multi-select-tags">
<span class="multi-select-tag">Tag 1</span>
<span class="multi-select-tag">Tag 2</span>
</div>
<svg class="multi-select-arrow" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
<div class="multi-select-dropdown" id="multi-select-sm" popover="auto">
<div class="multi-select-options">
<div class="multi-select-option">Option 1</div>
<div class="multi-select-option">Option 2</div>
</div>
</div>
</div>Large
Large Multi-Select
html
<div class="multi-select multi-select-lg">
<button class="multi-select-trigger" popovertarget="multi-select-lg">
<div class="multi-select-tags">
<span class="multi-select-tag">Tag 1</span>
<span class="multi-select-tag">Tag 2</span>
</div>
<svg class="multi-select-arrow" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
<div class="multi-select-dropdown" id="multi-select-lg" popover="auto">
<div class="multi-select-options">
<div class="multi-select-option">Option 1</div>
<div class="multi-select-option">Option 2</div>
</div>
</div>
</div>Tag Variants
Primary Tags
Primary Tags
html
<div class="multi-select">
<button class="multi-select-trigger" popovertarget="multi-select-primary-tags">
<div class="multi-select-tags">
<span class="multi-select-tag multi-select-tag-primary">
Option 1
<button class="multi-select-tag-remove">×</button>
</span>
<span class="multi-select-tag multi-select-tag-primary">
Option 2
<button class="multi-select-tag-remove">×</button>
</span>
</div>
<svg class="multi-select-arrow" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
<div class="multi-select-dropdown" id="multi-select-primary-tags" popover="auto">
<div class="multi-select-options">
<div class="multi-select-option">Option 1</div>
<div class="multi-select-option">Option 2</div>
</div>
</div>
</div>Outlined Tags
Outlined Tags
html
<div class="multi-select">
<button class="multi-select-trigger" popovertarget="multi-select-outlined-tags">
<div class="multi-select-tags">
<span class="multi-select-tag multi-select-tag-outlined">
Option 1
<button class="multi-select-tag-remove">×</button>
</span>
<span class="multi-select-tag multi-select-tag-outlined">
Option 2
<button class="multi-select-tag-remove">×</button>
</span>
</div>
<svg class="multi-select-arrow" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
<div class="multi-select-dropdown" id="multi-select-outlined-tags" popover="auto">
<div class="multi-select-options">
<div class="multi-select-option">Option 1</div>
<div class="multi-select-option">Option 2</div>
</div>
</div>
</div>With Max Selections Display
Max Selections Display
html
<div class="multi-select">
<button class="multi-select-trigger" popovertarget="multi-select-max">
<div class="multi-select-tags">
<span class="multi-select-tag">React</span>
<span class="multi-select-tag">Vue</span>
<span class="multi-select-tag-overflow">+3 more</span>
</div>
<svg class="multi-select-arrow" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
<div class="multi-select-dropdown" id="multi-select-max" popover="auto">
<div class="multi-select-options">
<div class="multi-select-option multi-select-option-selected">React</div>
<div class="multi-select-option multi-select-option-selected">Vue</div>
<div class="multi-select-option multi-select-option-selected">Angular</div>
<div class="multi-select-option multi-select-option-selected">Svelte</div>
<div class="multi-select-option multi-select-option-selected">Solid</div>
</div>
</div>
</div>With Clear All Button
With Clear All
html
<div class="multi-select">
<button class="multi-select-trigger" popovertarget="multi-select-clear">
<div class="multi-select-tags">
<span class="multi-select-tag">React</span>
<span class="multi-select-tag">Vue</span>
<span class="multi-select-tag">Angular</span>
</div>
<button class="multi-select-clear-all" aria-label="Clear all">×</button>
<svg class="multi-select-arrow" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
<div class="multi-select-dropdown" id="multi-select-clear" popover="auto">
<div class="multi-select-actions">
<button class="multi-select-action">Select All</button>
<button class="multi-select-action">Deselect All</button>
</div>
<div class="multi-select-options">
<div class="multi-select-option multi-select-option-selected">React</div>
<div class="multi-select-option multi-select-option-selected">Vue</div>
<div class="multi-select-option multi-select-option-selected">Angular</div>
</div>
</div>
</div>With Groups
Grouped Options
html
<div class="multi-select">
<button class="multi-select-trigger" popovertarget="multi-select-groups">
<span class="multi-select-placeholder">Select skills</span>
<svg class="multi-select-arrow" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
<div class="multi-select-dropdown" id="multi-select-groups" popover="auto">
<div class="multi-select-options">
<div class="multi-select-group">
<div class="multi-select-group-header">Frontend</div>
<div class="multi-select-option">React</div>
<div class="multi-select-option">Vue</div>
<div class="multi-select-option">Angular</div>
</div>
<div class="multi-select-group">
<div class="multi-select-group-header">Backend</div>
<div class="multi-select-option">Node.js</div>
<div class="multi-select-option">Python</div>
<div class="multi-select-option">Go</div>
</div>
</div>
</div>
</div>States
Error State
Error State
html
<div class="form-group">
<label class="form-label form-label-required">Skills</label>
<div class="multi-select multi-select-error">
<button class="multi-select-trigger" popovertarget="multi-select-error">
<span class="multi-select-placeholder">Select at least 2 skills</span>
<svg class="multi-select-arrow" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
<div class="multi-select-dropdown" id="multi-select-error" popover="auto">
<div class="multi-select-options">
<div class="multi-select-option">JavaScript</div>
<div class="multi-select-option">TypeScript</div>
<div class="multi-select-option">Python</div>
</div>
</div>
</div>
<span class="helper-text helper-text-error">Please select at least 2 skills</span>
</div>Disabled
Disabled State
html
<div class="multi-select multi-select-disabled">
<button class="multi-select-trigger" disabled>
<div class="multi-select-tags">
<span class="multi-select-tag">React</span>
<span class="multi-select-tag">Vue</span>
</div>
<svg class="multi-select-arrow" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
</div>Loading
Loading State
html
<div class="multi-select multi-select-loading">
<button class="multi-select-trigger" disabled>
<span class="multi-select-placeholder">Loading options...</span>
<span class="multi-select-spinner"></span>
</button>
</div>API Reference
Class Names
| Class | Description |
|---|---|
.multi-select | Base container (required) |
.multi-select-trigger | Trigger button (use with popovertarget) |
.multi-select-placeholder | Placeholder text |
.multi-select-tags | Tags container |
.multi-select-tag | Individual tag |
.multi-select-tag-remove | Tag remove button |
.multi-select-tag-primary | Primary colored tag |
.multi-select-tag-outlined | Outlined tag variant |
.multi-select-tag-overflow | Overflow count tag |
.multi-select-input | Search input within tags |
.multi-select-arrow | Dropdown arrow |
.multi-select-clear-all | Clear all button |
.multi-select-dropdown | Dropdown container (use with popover attribute) |
.multi-select-search | Search container in dropdown |
.multi-select-search-input | Search input in dropdown |
.multi-select-options | Options list |
.multi-select-option | Individual option |
.multi-select-option-selected | Selected option |
.multi-select-option-disabled | Disabled option |
.multi-select-option-checkbox | Option checkbox |
.multi-select-group | Option group |
.multi-select-group-header | Group header |
.multi-select-actions | Actions container (select all/deselect all) |
.multi-select-action | Action button |
.multi-select-outlined | Outlined variant |
.multi-select-filled | Filled variant |
.multi-select-sm | Small size |
.multi-select-lg | Large size |
.multi-select-error | Error state |
.multi-select-disabled | Disabled state |
.multi-select-loading | Loading state |
.multi-select-spinner | Loading spinner |
HTML Structure with Popover API
<div class="multi-select">
<button class="multi-select-trigger" popovertarget="dropdown-id">
<span class="multi-select-placeholder">Select options</span>
<svg class="multi-select-arrow">...</svg>
</button>
<div class="multi-select-dropdown" id="dropdown-id" popover="auto">
<div class="multi-select-options">
<div class="multi-select-option">Option 1</div>
<div class="multi-select-option">Option 2</div>
</div>
</div>
</div>Related Components
- Select - Single selection dropdown
- Tree Select - Hierarchical selection
- Chip - Tag/chip component
- Autocomplete - Search with suggestions