Basic Multiselect
Select multiple items with icons, search, and optional checkboxes
Live Demo
Try It
Click to open the dropdown and select multiple programming languages.
Checkboxes provide visual feedback for selection state.
Click the X icon on pills to remove selections.
Usage
Required Properties
value-member - Property name for unique values
display-value-member - Property to display as text
Optional Properties
icon-member - Property for emoji/icon display
show-checkboxes="true" - Show checkboxes (optional)
search-placeholder - Placeholder text for search input
Single Select Mode
Limit selection to only one item
Live Demo
Try It
Select a language - only one can be selected at a time.
Selecting a new item automatically deselects the previous one.
Dropdown closes automatically after selection.
Usage
Single Selection
multiple="false" - Disable multiple selection
close-on-select="true" - Close dropdown after selecting
When single select is enabled:
- Only one item can be selected
- Dropdown closes automatically after selection
- Selected value shows inline (no pills)
- Selecting a new item replaces previous selection
Grouped Options
Organize options into groups
Live Demo
Try It
Options are organized by Frontend, Backend, and Database categories.
Groups help organize large option sets.
Search works across all groups.
Usage
Grouping Options
group-member - Property name for group classification
allow-groups="true" - Enable group headers in dropdown
Options with the same group value appear together under a header.