List
React list component for bullet, numbered, and icon lists with consistent rhythm, nesting, tones, and Arabic abjad counters in RTL.
List renders bullet, numbered, or icon lists with the right <ul>/<ol> element. ListItem supports a second nesting level and per-item icons.
When to use
Use List for steps, requirements, and short enumerations in guidance pages and forms. Choose the ordered variant when sequence matters, such as application steps. Use icons to mark completed or blocked items.
For interactive rows, use StructuredList.
Examples
- Review your details
- Check the total
- Confirm the address
- Confirm and pay
Props
Props declared by List. Native attributes of the underlying element pass through.
<List>
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "ordered" | "unordered" | "with-icon" | ||
tone | "primary" | "neutral" | "on-color" |
<ListItem>
| Prop | Type | Default | Description |
|---|---|---|---|
level | 1 | 2 | Nesting depth: 2 indents 24px and shifts the marker (ordered → letters, unordered → bullet). | |
icon | react.ReactNode | with-icon lists only - overrides the default check-circle for this item. |
Accessibility
List renders native <ul> or <ol>, so item counts and positions are announced. Icons are aria-hidden, and the item text carries the meaning.
Nested lists keep proper structure so screen readers report levels correctly. In Arabic, ordered lists count with abjad letters.