BU01 Basic Multiselect
Select multiple items with icons, search, and optional checkboxes
Demo
Controls
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.
Description
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
BU02 Single Select Mode
Limit selection to only one item
Demo
Controls
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.
Description
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
BU03 Grouped Options
Organize options into groups
Demo
Controls
Options are organized by Frontend, Backend, and Database categories.
Groups help organize large option sets.
Search works across all groups.
Description
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.