List

The <List> component is a content component used to display a list of items. It is versatile and can be used for both unordered and ordered lists, making it suitable for various content presentation needs.

The list is divided into two parts: <List> and <List.Item>. By default, the application displays an unordered (ul) list. However, this list can also be displayed as an ordered (ol) list.

Anatomy

The <List> component consists of the following parts:

Apperance

The appearance of a component can be customized using the variant and size props. These props adjust the visual style and dimensions of the component, available values are based on the active theme.

Usage

The List component is used to display a group of related items in a consistent and accessible way. It supports both unordered (bulleted) and ordered (numbered) formats and can be customized through nesting. List components are ideal for organizing content such as tasks, steps, features, or grouped data while maintaining design consistency and readability across the application.

Do

Use two or more items in a list to provide meaningful content.

Don't

Avoid using a list with only one item, as it does not provide meaningful grouping or context.

Unordered list

Per default, the <List> component renders an unordered list. Unordered lists are best used for grouping items that do not require a specific order, such as features, options, or general information. They help users quickly scan and understand related items without implying a sequence.

Ordered list

Ordered lists are best used when the sequence of items matters, such as for step-by-step instructions, processes, timelines, or ranked priorities. They help users follow a specific flow and improve accessibility by clearly communicating order to screen readers. Use them for actions that must be completed in order or when numbering adds meaning, avoid them when the item order is irrelevant.

You can use the as prop to change the list type from unordered to ordered.

Nested Unordered List

Nested lists allow you to represent hierarchical relationships or group related items under a common parent. Each level of nesting is typically indented to visually communicate its position in the structure. This helps users understand which items are primary and which are subordinate.

Props

List

"ul" | "ol";

"ul"

ReactNode;

List.Item

ReactNode;

Alternative components

• Stack: Lists should be used for content and not for layout purposes. If you need accessible lists for layout, consider using the <Stack> component with asList property instead.