Toggle the switches to shape the control. The Quick usage snippet updates live so you can copy exactly what you configured.

BU01 Interactive multiselect

Selection mode, search, badges and the new inline clear button in one place.

Controls
Navigate keeps all rows visible and jumps between matches (Ctrl+↑/↓).
Quick usage 
 
 
  • value-member / display-value-member map your data onto the control.
    •  
  • show-clear and the inline counter are new field-shell controls in v2.0.0.
    •  
  • Switching badges-display-mode to count/compact keeps the field compact for large selections.
 
 
BU02 Single-select mode
 
Set multiple=false for a classic single-choice picker.
 
  
Selecting an option replaces the previous choice and closes the dropdown.
 
Controls 
 
 
 
 
 
 
Quick usage 
 
 
 
 
 
BU03 Grouped list — select-all per group & counts (v2.2.0)
 
A tristate checkbox on each group header, per-group selected counts, and configurable selected order.
 
  
 
Controls 
 
  
  
Reorders badges/popover only — form value keeps insertion order.
 
 
 
Quick usage 
 
 
 
  • group-select-mode="cascade" (v2.2.0) puts a tristate select-all
						checkbox on each group header — it toggles that group's visible members and reads
						indeterminate when partial. The group name is never a value; the form output carries member
						values only.
    •  
  • Every group header shows a per-group selected count, and getCountLabelCallback((selected, total) => …) formats that chip and the
						in-input counter together — here both read selected/total.
    •  
  • selected-order reorders the badges and popover (label-asc / label-desc) — display-only, so getValue() and the form keep insertion
						order.