The multiselect adapts on three independent axes: the presentation it chooses per device, the badge display it forces from its own width, and full RTL mirroring driven by CSS logical properties.
RS01 Mobile presentation
Floating panel on desktop, fullscreen sheet on touch — or force either.
Controls
Set fullscreen to preview the phone sheet here on desktop.
A filter/navigate toggle inside the fullscreen overlay.
Quick usage
auto(default) is a floating dropdown on desktop and a fullscreen sheet on touch devices. Setmobile-presentationtofullscreento preview the phone overlay here.fullscreen-autofocusfocuses the search field (and pops the soft keyboard) when the sheet opens; by default the list shows first.show-search-mode-toggleadds a filter/navigate toggle inside the fullscreen overlay.
RS02 Container-responsive collapse (v2.0.0)
Collapse to a count based on the control’s OWN box — not the viewport.
Unlike mobile-presentation (which reads the device), this reacts to the element’s own width. Drop the picker into a narrow column and it collapses to a “N selected” count; widen it and the badges return.
Controls
px width of the control’s OWN box (empty = unset).
Quick usage
- New in v2.0.0.
collapse-badges-belowforcescountmode whenever the element’s own border box is narrower than the given pixel width — container-responsive, not viewport-responsive. - Five options are pre-selected via
el.setSelected(...)so the collapse is visible. Leave the value empty to turn the behavior off entirely. - It is non-destructive: your configured
badges-display-modeis restored exactly once the box widens back.
RS03 RTL
Add dir="rtl" and the whole component mirrors — overlay included.
Controls
Quick usage
- Everything mirrors via CSS logical properties when
dir="rtl"is set: checkboxes move to the right of each row, the search and counter flip, and badges reverse. badges-position(top/bottom/left/right) is mirrored too —left/rightfollow the reading direction.- There is nothing to configure beyond
dir— even the fullscreen sheet mirrors.