Web Multiselect Component

Advanced multiselect web component from @keenmate/web-multiselect (v2.0.0-rc04) 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.

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.

Programmatic Control

Events & Callbacks

Resources

  • npm Package: @keenmate/web-multiselect (v2.0.0-rc04)
  • 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)
  • 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