Overview

Components Facet List

Overview API Examples Style Tokens

The Facet List component is a container for expandable and reorderable facets, providing a structured way to organize and manage content sections.

Basic usage

The Facet List component serves as a container for Facet items, each consisting of a header and expandable content section.

Component anatomy

Each Facet within the list consists of:

Header (lmn-facet-header): Always visible section
Content (lmn-facet-content): Expandable content area
Drag handle: Optional reordering control

Reordering

Enable facet reordering using the allowRepositioning Input. When enabled:

Drag handles appear on each facet
Facets can be dragged to new positions
Position menu available through handle button
Visual feedback during drag operations

Expansion Control

Each facet can be independently expanded or collapsed:

Smooth animation transitions
Visible expansion state indicator
Content visibility management
Proper spacing maintenance

Negative Theme

Apply the negative theme using the negative Input to adapt the component for dark backgrounds. This affects:

Background colors
Border colors
Interactive state colors
Focus indicators

Accessibility

The component implements comprehensive keyboard support:

Arrow keys for facet navigation
Space/Enter for expansion toggle
Drag and drop keyboard controls
Focus management during reordering

ARIA Implementation

Each facet includes proper ARIA attributes:

List/listitem roles
Expanded state indicators
Label relationships
Live region updates during reordering

Focus Management

Careful attention to focus handling:

Retained focus after reordering
Proper focus indicators
Logical tab order
Drag handle focus states

Best Practices for Developers

Content Structure DEMO HERE
Reordering Implementation DEMO HERE
Expansion Management DEMO HERE