Web Multiselect Component

Advanced multiselect web component from @keenmate/web-multiselect (v2.0.0) with virtual scrolling, search, tree-of-options rendering, and a full-screen mobile overlay. Built as a framework-agnostic web component with excellent performance.

Key Features: Virtual scrolling (handles 15,000+ options), full keyboard navigation, multiple display modes, tree / hierarchy mode with cascade checkboxes, phone full-screen overlay, RTL support, external/async search, and comprehensive theming via --ms-* / --base-* CSS variables — including swappable icons through the --base-icon-* tokens.

Basic Multi-Select

Display Modes

Shows individual badges for each selection
Shows "X selected" counter
First item + "+X more" badge
Limited badges + "+X more"
Minimal UI with no badges

Search & Filter

Hides non-matching options
Jumps to matches, keeps all visible

Tree of Options

Give each option a materialized dot-path ("1", "1.1", "1.1.1", …) and set path-member. Tree mode auto-enables: the component derives parent and depth from the path and renders the options depth-first, indented by level. The tree is always fully expanded (no chevron) — reach for @keenmate/web-treeview when you need expand/collapse.

Branch + leaf nodes are all selectable, indented by depth
Open, type kale → Vegetables → Leafy → Kale (ancestors kept)
Branches are pure structure — no checkbox, skipped by keyboard
Two items pre-selected — badges show Fruit / Pome fruit / Apple
Tristate (dash) on partial branches; Select All emits the rolled-up roots. Emitted getValue(): []

Real Data — Full ISCO-08 Classification

Everything at once on real data: the whole International Standard Classification of Occupations (ISCO-08) — 619 groups (10 major → 43 sub-major → 130 minor → 436 unit). The ISCO code is the hierarchy (2211 → path 2.22.221.2211), so it drops straight into path-member. Only the unit groups (leaves) are selectable. A getSearchValueCallback widens the filter to match the title, ISCO code, and full breadcrumb; virtual scroll keeps 600+ rows smooth.

Badge shows the leaf title only (prefixed .. /); full breadcrumb in the badge tooltip. Source: ISCO-08 (© International Labour Organization) — demo data.

Mobile & Fullscreen

On phones the dropdown opens as a full-screen overlay instead of a floating panel — a touch-friendly sheet with its own search header, big rows, and a close button. The mobile-presentation attribute (auto | floating | fullscreen) picks the presentation; auto uses the sheet only on phones. Because it's usually a phone-only look, each demo offers a Preview as fullscreen toggle so you can inspect the overlay on desktop.

On a phone this opens fullscreen automatically.
On a phone: search is focused, keyboard pops on open (vs. default keyboard-off).
Fullscreen: type, then use the N of M ↑/↓ navigator to jump.

Grouped Options

Options grouped by Frontend, Backend, and Database categories
Some options are disabled and cannot be selected

Virtual Scrolling (Large Datasets)

Virtual scrolling handles massive datasets efficiently. Try searching to see instant filtering.

RTL (Right-to-Left) Support

Right-to-left layout for Arabic, Hebrew, Persian, etc.

Custom Icons

Every built-in glyph is a CSS variable, so re-skinning the picker is pure CSS — no slots, no JS. One --base-icon-* swap cascades to matching parts: --base-icon-chevron drives the toggle arrow and the fullscreen pager, while --base-icon-close covers every ✕ (badge remove, count clear, popover close). Need finer control? --base-icon-remove (badge ✕), --base-icon-clear (count clear) and --base-icon-search override individually and win over --base-icon-close. Each is a full url(...) value — an inline SVG data-URI, an external file, whatever background-image accepts.

--base-icon-chevron + --base-icon-close → rounded circle chevron and circle-✕ on every badge remove.
Only --base-icon-remove is set — a filled square-✕ on badges, while the toggle chevron keeps the framework default.
A pre-oriented down-caret with --ms-toggle-rotate-closed: 0deg / --ms-toggle-rotate-open: 180deg — no rotation closed, flips up on open.

Shared Icon Bridge — Pure Admin ↔ Web Component

The --base-icon-* tokens aren't private to the web component — they're a shared contract. Pure Admin's own controls read the exact same tokens: the custom .pa-checkbox paints its tick with --base-icon-check (as an SVG mask), which is the identical glyph <web-multiselect> masks for its selected rows. So overriding --base-icon-check once on a wrapper re-skins the framework checkbox and the web component in lockstep — no per-component theming, no JS.

Framework checkbox — tick masked from --base-icon-check.
Open the dropdown — the checked rows carry the same star, from the same token.
This is the whole point of the --base-* bridge: it lets shadow-DOM web components and the SCSS-compiled framework share one theming surface. Pure Admin emits the defaults at :root via _base-css-variables.scss, so out of the box the picker already matches the framework's glyphs — this panel just proves the swap propagates to both at once.

Programmatic Control

Events & Callbacks

Resources

  • npm Package: @keenmate/web-multiselect (v2.0.0)
  • Repository: github.com/keenmate/web-multiselect
  • Documentation: See package README and AI instructions in ../../web-multiselect/ai/
  • CSS Variables: Uses --ms-* prefix (component) and --base-* prefix (theme integration)
  • Custom Icons: --base-icon-chevron (toggle + pager), --base-icon-close (all ✕), plus granular --base-icon-remove / --base-icon-clear / --base-icon-search; opt out of chevron rotation with --ms-toggle-rotate-closed/open
  • Theming: Pure Admin provides --base-* variables via src/scss/_base-css-variables.scss
Type / for commands, : to search a category, or just start typing
↑↓ Navigate
↵ Select
Esc Close

Settings

Press Ctrl+K to preview the palette.
Body text size. All elements scale proportionally.

John Doe

Administrator
  • Dashboard
  • Forms
  • Tables
  • Data Grid