Classic Examples — keen_web

✨ Declarative Usage (No JavaScript Required!)

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

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

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

Simple multiselect with basic options

Select Technologies

Select multiple programming languages

Select Countries

Start typing to filter options

Rich Content with Icons

Options with icons, subtitles, and multiline content

Select Frameworks

Options with icons and descriptions

Search Hint

Display helpful text above the input to guide users

With Search Hint

Open the dropdown to see the hint above the input

Display Modes

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

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

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

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

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

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

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.