A basic list with simple text items.

Use the `List` component with `List.Content` and `List.Item` for a simple list.

A list with icon prefixes for each item.

Use the `prefixElement` prop to add icons or other elements at the beginning of list items.

A list with primary variant.

Use the `variant` prop to make the list items primary.

```tsx <List variant="primary">...</List> ```

A list with sections and dividers.

Use `List.Label` to add section titles and `List.Divider` to separate sections.

```tsx <List> <List.Label>Navigation</List.Label> <List.Content>...</List.Content> <List.Divider /> <List.Label>System</List.Label> <List.Content>...</List.Content> </List> ```

A list with collapsible nested items.

Use `List.SubTrigger` to create a collapsible section and `parentId` on nested content to link them together.

```tsx <List> <List.Content> <List.Item> <List.Value>Home</List.Value> </List.Item> <List.SubTrigger id="docs"> <List.Value>Documents</List.Value> </List.SubTrigger> <List.Content parentId="docs">...</List.Content> <List.Item> <List.Value>Calendar</List.Value> </List.Item> </List.Content> </List> ```

A list with large size.

Use the `size` prop to make the list items large.

```tsx <List size="large">...</List> ```

A list with pre-expanded nested content.

Use the `defaultOpen` prop on `List.SubTrigger` to make nested content visible by default.

```tsx <List> <List.Content> <List.Item> <List.Value>Home</List.Value> </List.Item> <List.SubTrigger id="docs" defaultOpen> <List.Value>Documents</List.Value> </List.SubTrigger> <List.Content parentId="docs">...</List.Content> <List.Item> <List.Value>Calendar</List.Value> </List.Item> </List.Content> </List> ```

A list with indentation reference lines for better visualization of the nesting structure.

Use the `shouldShowReferenceLine` prop on the List component to display vertical reference lines that help visualize the hierarchical structure.

A list with keyboard shortcut hints.

Use the `shortcut` prop to display keyboard shortcuts next to list items.

```tsx <List> <List.Content> <List.Item shortcut={{ keys: "H" }}> <List.Value>Home</List.Value> </List.Item> <List.Item shortcut={{ keys: "D" }}> <List.Value>Documents</List.Value> </List.Item> <List.Item shortcut={{ modifier: "command", keys: "," }}> <List.Value>Settings</List.Value> </List.Item> </List.Content> </List> ```

A list with selection functionality.

Use the `selection` prop on the List component to enable selection functionality. This example demonstrates radio-like behavior (single selection) with ability to deselect.

NOTE: This example uses a custom implementation to override the component's internal selection state.

A list with disabled items.

Use the `disabled` prop to make items non-interactive.

```tsx <List> <List.Content> <List.Item disabled> <List.Value>Mail (Maintenance)</List.Value> </List.Item> </List.Content> </List> ```

A nested list with non-collapsible sub-sections.

Use the `disableCollapse` prop on `List.SubTrigger` to prevent toggling of the sub-list.

```tsx <List> <List.Content> <List.SubTrigger id="docs" defaultOpen disableCollapse> <List.Value>Documents</List.Value> </List.SubTrigger> <List.Content parentId="docs">...</List.Content> </List.Content> </List> ```

A list with multiple levels of nesting.

You can create deeply nested structures by using multiple layers of `List.SubTrigger` and `List.Content` with appropriate `parentId` props.

A nested list with selection functionality.

Combine the selection mode with nested lists to create hierarchical selectable content.

WithAsProp: Demonstrates using the `as` prop to render List.Content and List.Item as different HTML elements.

Use cases:

- `List.Content as="ul"` with `List.Item as="li"` for semantic HTML lists - `List as="nav"` for navigation wrapper - Custom elements for specific use cases

Note: For proper HTML structure, use `as` on `List.Content` for list containers (ul/ol), not on the `List` root which serves as the outer wrapper.

```tsx <List> <List.Content as="ul"> <List.Item as="li">Item 1</List.Item> <List.Item as="li">Item 2</List.Item> </List.Content> </List> ```

NonInteractive: Demonstrates a non-interactive list for display purposes only.

- When `interactive={false}`, list items use `div` as default element instead of `button`. - Hover effects and active states are disabled. - Useful for read-only lists, documentation, or static content display.

```tsx <List interactive={false}> <List.Content>...</List.Content> </List> ```