'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Data display
ListView
A list of rich items to select, open or act on.
Ant Design: List
import { ListView, ListItem } from '@alea/ui';
Examples
ListView
Rich items with a start, description and end.
Ada Lovelaceada@example.comOwner
Grace Hoppergrace@example.comEditor
Alan Turingalan@example.comViewer
Separated, with actions
Items as cards; onAction opens one.
tokens.json12 KB · today
tokens.css8 KB · yesterday
Props
ListView props
A list of rich items people can select, open or act on, with keyboard navigation (Ant's List).
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "separated" | "joined" | 'joined' | Lines between items (joined) or separate cards. |
ListItem props
One item of a ListView.
| Prop | Type | Default | Description |
|---|---|---|---|
description | ReactNode | - | A second line. |
end | ReactNode | - | Actions or meta on the right (buttons stay reachable with Tab and arrows). |
start | ReactNode | - | An avatar, icon or image on the left. |
Accessibility
- A grid list: arrows move between items and into their buttons.
Keyboard
| Key | Does |
|---|---|
| Arrow Up / Down | Move between items |
| Space | Selects |
| Enter | Opens (onAction) |
Do and don't
Do
- Use separated for cards, joined for dense lists.
- Give the list an aria-label.
Don't
- Don't nest interactive controls deeper than one level in an item.
- Don't use ListView for tabular data: use Table.