Classic Examples — keen_web

✨ Declarative Usage (No JavaScript Required!)

Pass inline <option>/<optgroup> children with data-icon · data-subtitle · selected

Use standard HTML <option> elements - no JavaScript needed for simple cases! The component reads value, selected, and data-* attributes from each option.

Simple Choice

No JavaScript required - pure HTML!

Multiple Fruits

Icons via data-icon attribute

Grouped Options

Use <optgroup> for grouping

With Subtitles

Use data-subtitle for descriptions

Custom Group Labels

Using renderGroupLabelContentCallback to customize group headers

Single-Select Mode

multiple={false} — a single-select (multiple defaults to true upstream)

Only one item can be selected at a time. Use multiple={false}

Select Programming Language

Only one language can be selected

Single-Select: Keyboard Navigation Only

enable_search={false} · search_input_mode="readonly"

No search - use arrow keys, PageUp/PageDown, Home/End to navigate. Press Enter to select.

Select Country (No Search)

Try: ↑/↓ arrows, PageUp/Down (10 items), Home/End, Enter to select

Basic MultiSelect

search_placeholder="Search technologies..." · pre-select with value={["js", "ts"]}

Simple multiselect with basic options

Select Technologies

Select multiple programming languages

Select Countries

Start typing to filter options

Rich Content with Icons

Options carry icon/subtitle keys — read via the default icon_member="icon" · subtitle_member="subtitle"

Options with icons, subtitles, and multiline content

Select Frameworks

Options with icons and descriptions

Search Hint

search_hint="💡 Start typing to filter options"

Display helpful text above the input to guide users

With Search Hint

Open the dropdown to see the hint above the input

Display Modes

badges_display_mode="badges | count | compact | partial | none" · pair with show_counter={true} · badges_threshold={5}

Different ways to display selected items

Basic Display Modes

Badges Mode (Default)

Shows each selection as a removable badge

Count Mode

Shows "X selected" text with clear button

Compact Mode

First item + count in single badge: "JavaScript (+2 more)"

Partial Mode

Shows first 3 badges + "+X more" badge (when >5 selected)

None Mode (Minimal)

No badges shown - only [X] badge next to toggle

Display Mode + Counter Combinations

Badges + Counter

Individual badges + [X] badge

Count + Counter

"X selected" text + [X] badge (double count display)

Compact + Counter

First item + count badge + [X] badge

Threshold Auto-Switching

Badges → Count at 3

Badges when ≤3, switches to count when >3

Badges → Partial at 5

Badges when ≤5, shows 3 badges + "+X more" when >5

Internationalization (i18n)

English Pluralization

"1 item selected" vs "3 items selected"

Czech Pluralization

1 položka | 2-4 položky | 5+ položek

Spanish Partial Mode

Shows "+X más" instead of "+X more"

Badge Tooltips

enable_badge_tooltips={true} · badge_tooltip_placement="top | bottom" · badge_tooltip_delay={100}

Display helpful tooltips when hovering over selected item badges

Basic Tooltips Hover over badges to see default tooltip

Custom Tooltip Content Shows custom tooltip with description

Tooltip Placement: Bottom Tooltip appears below the badge

Custom Delay (100ms) Faster tooltip appearance (default is 300ms)

Badge Positioning

badges_position="bottom | top | left | right"

Control where selected badges appear relative to the input: badges-position

Badge Position: Bottom (Default)

Badges appear below the input (default)

Badge Position: Top

Badges appear above the input

Badge Position: Left

Badges appear inline to the left of input

Badge Position: Right

Badges appear inline to the right of input

Inline Vertical Alignment

Control vertical alignment for left/right badge positions with --ms-inline-align

Right + Center Align (Default)

--ms-inline-align: center

Right + Top Align

--ms-inline-align: flex-start

Left + Center Align (Default)

--ms-inline-align: center

Left + Top Align

--ms-inline-align: flex-start

RTL (Right-to-Left) Support

dir="rtl" — passed through verbatim; auto-flips layout, alignment, and badge flow

Full support for RTL languages (Arabic, Hebrew, Persian, etc.) with automatic detection from dir="rtl"

Basic RTL Example

Toggle on left, text right-aligned, badges flow right-to-left

RTL with Arabic Text

Real Arabic technology terms

RTL Count Mode

Count badge on left side in RTL mode

LTR vs RTL Comparison

LTR (Left-to-Right)

RTL (Right-to-Left)

Notice toggle position, text alignment, and badge layout differences

RTL + Badges Position: Right

Badges inline on left (visually) with proper margin

RTL + Badges Position: Left

Badges inline on right (visually) with proper margin

Async Search / Lookup

min_search_length={2} · keep_options_on_search={true} · map non-canonical keys with value_member="id" · display_value_member="name" · subtitle_member="description"

Load options dynamically as users type. Perfect for large datasets, API searches, or real-time filtering.

Search GitHub Users

Tries GitHub API, uses mock data if rate-limited

Search Products

Simulated product database search

Security Groups (Initial + Async)

Initial favorites + full search on typing (type at least 2 characters)

Initial Options + Async Search Pattern:

The Security Groups example demonstrates a common UX pattern:

Initial State: Shows 5 most frequently used security groups when dropdown opens
On Typing: Calls server API to search ALL security groups (after 2+ characters)
On Clear: Returns to showing the 5 initial favorites
Configuration: options (initial data) + searchCallback (async) + keep-options-on-search="true" + min-search-length="2"

Search Modes: Filter vs Navigate

search_mode="filter" hides non-matches · search_mode="navigate" jumps to matches while keeping all rows visible

Choose between filter mode (hide non-matches) or navigate mode (jump to matches while keeping all visible)

Filter Mode (Default)

Hides non-matching options (standard behavior)

Navigate Mode

Keeps all options visible, jumps to matches (highlighted with left border)

When to use each mode:

Filter Mode: Large lists where you want to narrow down options (e.g., product catalogs, user lists)
Navigate Mode: Quick selection from known lists (e.g., country/state selectors)

Navigate-mode keyboard shortcuts:

type — first match becomes focused; all matches keep a left-border highlight
Ctrl/Cmd + ↓ — jump to next match
Ctrl/Cmd + ↑ — jump to previous match
↑ / ↓ — move focus one option at a time
Home / End — jump to first / last option
PageUp / PageDown — move 10 options at a time
Enter — toggle selection of the focused option
Esc — clear the search (or close the dropdown if search is empty)

Event Handling

DOM events (no attribute): el.addEventListener("select" | "deselect" | "change", …) — see the inline <script>

Listen to select, deselect, and change events

Select Options (Check Console)

Open browser console to see events

Event log will appear here...

Looking for the on* property handlers and the beforeSelect/beforeDeselect interceptors? See Events, Handlers & Interceptors.