How to build an accessible Item in React
Item is presentational by default; the slotted element determines the role and focus behaviour, so wrap it asChild around a button or link when the row is interactive
When to use a Item
- Composing a single content row with leading media, a text block, and trailing actions
- Building list, menu, or card rows from a consistent layout primitive
- Slotting a row onto a real anchor or button via asChild for navigation or selection
When not to use it
- A full surface with elevation and padding regions — use Card
- Key-value metadata pairs — use DataList
Accessibility
Role none, verified at WCAG 2.2-AA.
Common mistakes
Avoid: Wrapping an Item div in an anchor to make the whole row clickable
Prefer: Use Item asChild with the anchor as the single child so semantics and focus are native
asChild merges row styling onto the real interactive element instead of nesting a non-semantic div
Example
<Item>
<ItemMedia><Avatar /></ItemMedia>
<ItemContent>
<ItemTitle>Ada Lovelace</ItemTitle>
<ItemDescription>Mathematician</ItemDescription>
</ItemContent>
<ItemActions><Button size="sm">Edit</Button></ItemActions>
</Item>