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" name="multi-select-filter" class="multi-select-input" placeholder="Search..." aria-label="Filter selected options" />
</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" name="multi-select-search" class="multi-select-search-input" placeholder="Search options..." aria-label="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
Skills
Please select at least 2 skills
html
<div class="form-group">
<span class="form-label form-label-required">Skills</span>
<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>Color Variants
Color Variants
html
<div class="multi-select multi-select-primary">
<button class="multi-select-trigger" popovertarget="demo-ms-color-primary">Primary Multi-Select</button>
</div>
<div class="multi-select multi-select-secondary">
<button class="multi-select-trigger" popovertarget="demo-ms-color-secondary">Secondary Multi-Select</button>
</div>
<div class="multi-select multi-select-tertiary">
<button class="multi-select-trigger" popovertarget="demo-ms-color-tertiary">Tertiary Multi-Select</button>
</div>
<div class="multi-select multi-select-info">
<button class="multi-select-trigger" popovertarget="demo-ms-color-info">Info Multi-Select</button>
</div>
<div class="multi-select multi-select-success">
<button class="multi-select-trigger" popovertarget="demo-ms-color-success">Success Multi-Select</button>
</div>
<div class="multi-select multi-select-warning">
<button class="multi-select-trigger" popovertarget="demo-ms-color-warning">Warning Multi-Select</button>
</div>
<div class="multi-select multi-select-error">
<button class="multi-select-trigger" popovertarget="demo-ms-color-error">Error Multi-Select</button>
</div>Ghost Variant
Ghost Multi-Select
html
<div class="multi-select multi-select-ghost">
<button class="multi-select-trigger">Ghost Multi-Select (no border)</button>
</div>Related Components
- Select - Single selection dropdown
- Tree Select - Hierarchical selection
- Chip - Tag/chip component
- Autocomplete - Search with suggestions