List Item
A row with leading and trailing slots, for lists that aren't tabular enough to be a table.
List or table?
A Table is for comparing the same fields down a column. Use list items when each row is a thing rather than a record — files, conversations, settings — and nobody needs to scan one attribute vertically.
Slots
Selection
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | Primary line. | |
| description | string | Secondary line under the title. | |
| leading | ReactNode | Left slot: an avatar, icon, or checkbox. | |
| trailing | ReactNode | Right slot: a badge, chevron, or action. | |
| selected | boolean | false | Marks the row as the current selection. |
| disabled | boolean | false | Dims the row and drops its click handler. |
| onClick | () => void | Click handler. |
Why it works this way
Why
- Leading and trailing slots let one row serve menus, lists and settings without a new component per case.
Don't
- Don't use it for tabular data. Use Table.