Overview

Components Inputs Input Select

The Input Select component provides a customizable dropdown selection interface with three modes: standard select, combobox, and autocomplete.

Basic usage

The Input Select can be implemented using three different selectors based on functionality:

<lmn-input-select>: Standard dropdown selection
<lmn-input-combobox>: Filterable dropdown with text input
<lmn-input-autocomplete>: Server-side filtered dropdown

Component anatomy

Selection Mode

Configure selection behavior using the selectionMode Input:

Single: Standard single item selection
Multiple: Multi-select with chip display
Validation and max selection limits
Clear selection support

Content Structure

Support for rich content display:

Label with optional markers
Helper text and hints
Error messages
Alert messages
Language indicators
Counter display

List Options

Configure dropdown items with:

Text and value pairs
Custom option templates
Group headers
Search highlighting
Empty state messages
Loading states

Contextual Actions

Add supplementary actions:

Clear selection button
Custom action buttons
Add new option
Loading indicators
Disabled state info

Filtering

Combobox and Autocomplete modes support:

Client-side filtering
Server-side search
Debounced input
Loading states
No results handling
Add value as option

State Management

Handle various states through:

Form control integration
Required validation
Max selection limits
Disabled state
Read-only mode
Error states

Negative Theme

Enable dark theme using the negative Input, affecting:

Background colors
Text colors
Border colors
Icons and buttons
Dropdown styling

Accessibility

Comprehensive keyboard support:

Arrow keys for option navigation
Type-ahead filtering
Enter/Space for selection
Escape to close dropdown
Tab through interactive elements
Focus trap in dropdown

ARIA Implementation

Complete ARIA integration:

Combobox/listbox roles
Live regions for updates
Selection state announcements
Group relationships
Error notifications
Loading status

Focus Management

Careful focus handling:

Focus retention during filtering
Return focus on close
Multi-select focus behavior
Clear button focus
Disabled state handling

Best Practices for Developers

Selection Configuration DEMO HERE
Filtering Implementation DEMO HERE
State Management DEMO HERE