List

The List component is a versatile container supporting multiple modes, selection types, and hierarchical structures through List Items and List Item Groups.

Basic usage

The List component offers multiple selectors for different semantic purposes:

• <lmn-list>: Generic list
• <lmn-list-presentation>: Presentation list
• <lmn-list-listbox>: Selection list
• <lmn-list-sheet>: Menu-like list
• <lmn-list-tablist>: Tab list
• <lmn-list-tree>: Tree structure
• <lmn-list-navigation>: Navigation menu

Component anatomy

List Modes

Each mode provides specific functionality and semantic meaning:

• Free: Standard list with flexible usage
• Presentation: Semantic grouping of content
• Listbox: Single/multiple selection interface
• Sheet: Menu-style options
• Tablist: Tab interface
• Tree: Hierarchical structure
• Navigation: Navigation menu structure

Selection Support

Control item selection using the selectionMode Input:

• None (default): No selection
• Radio: Single selection
• Checkbox: Multiple selection
• Toggle: Toggle selection

Selection controls position can be configured using selectionControlsPosition ('start' or 'end').

Hierarchical Structure

Support for nested lists and groups:

• List Item Groups (lmn-list-item-group)
• Nested Lists
• Automatic indentation
• Optional dividers

Nested Demo

Lists can be nested. The indentation for each sub-List, as well as the correct semantics for screen readers, are automatically applied.

Interactive Features

Enable user interactions with:

• allowReordering: Enables drag-and-drop reordering
• activeItem: Controls active state for navigation/tabs
• Keyboard navigation support
• Focus management

Negative Theme

Enable dark theme support using the negative Input. Affects:

• Background colors
• Text colors
• Divider colors
• Selection controls

Custom content

It's possible to add custom content to list item

Dividers

You can hide the dividers between List Items, for a more seamless experience.

Accessibility

Semantic Structure

The component implements proper ARIA roles based on mode:

• list/listbox/tree roles for container
• listitem/option/treeitem roles for items
• group role for item groups
• Proper role relationships

Keyboard Navigation

Comprehensive keyboard support:

• Arrow keys for item navigation
• Space/Enter for selection
• Tab navigation when appropriate
• Mode-specific keyboard behaviors

Selection Management

Selection handling includes:

• ARIA selected/checked states
• Proper group relationships
• Focus management during selection
• Clear state announcements

Best Practices for Developers

1. Mode Selection DEMO HERE

2. Selection Implementation DEMO HERE

3. Hierarchy Guidelines DEMO HERE