On this page
Overview
Show code, SettingsRows.tsx
Variants
On a pane
In a muted surface that holds only lists, the rows take the raised fill, so they stand out from it.
Show code, OnAPane.tsx
More content
More content can follow the description, such as a status.
Show code, ExtraContent.tsx
Density
Rows pack more or less tightly, from extra small to large, which changes only their padding, never the text.
Show code, RowDensity.tsx
Anatomy
List
Row
Handle
Start
Content
Description
End
Show code, ListAnatomy.tsx
Behaviour
Rows that open something
A whole row can open what it names, through its one link, while its other controls stay pressable above it.
Show code, OpenFromRow.tsx
The current row
The row whose details show beside the list is marked as the current one.
Show code, CurrentRow.tsx
Checked rows
A checkbox at a row's start chooses it for an action on several rows at once.
Show code, CheckedRows.tsx
Put in order
Rows can each take a handle: drag it, or press Space and move the row with the arrow keys.
Show code, Reorder.tsx
Adapting to width
Labels and descriptions wrap, and an action that no longer fits beside the text moves below it.
Show code, NarrowRows.tsx
Rules
A row opens one thing, and its description tells it apart from the others.
Use it when
- Related items with a title, a detail and an action each, such as settings
- Items that each open a page or a document, such as recent plans
- A short set of results or members under a search field
- The list beside an item's details, with its current row marked
- Items people put in their own order, such as an agenda
Show code, OneTarget.tsx
Show code, SeveralTargets.tsx
Content
Keep the description to one fact that tells items apart, such as who changed it and when. Name a repeated action after its row, such as More actions for Roadmap.
Accessibility
| Key | Action |
|---|---|
| Tab, Shift+Tab | Moves through the handles, links and controls of rows. |
| Space, Enter | On a handle, lifts the row, or drops a lifted row. |
| ↑, ↓, Home, End | While a row is lifted, moves it one place, or to either end. |
| Esc, Tab | While a row is lifted, puts it back. |
| Alt+↑, Alt+↓ | On a row's link or button, moves the row one place at once. |