# ListItem

> One row of a list: a title, a line of detail and an action.

- **Level**: molecule · **Status**: stable · **Role**: content
- **Import**: `import { ListItem } from "@rrios-forge/ui/molecules/list-item";`
- **Source**: `packages/ui/src/molecules/list-item`

Reusable list row with leading slot, title, description, metadata, badge and action. interactive only adds visual hover/focus affordances; the consumer wraps the row in a real semantic interactive element when the whole row commits an action. selected becomes aria-selected only when interactive=true. Patterns consulted: Patterns/Information Architecture · MetadataAndActions, Patterns/Composition · DoNotOverCompose.

## Use it for

- Property list / data row / list item → `PropertyList` / `DataRow` / `ListItem`
- Row that opens a page (settings-list disclosure) → `ListItem href` (whole row is the link, trailing chevron)

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `tone` | — | `neutral` `muted` `danger` | `neutral` | Which semantic colour family the element speaks in. |
| `selected` | — | `true` `false` | `false` | Chosen in a set: the selected wash plus a non-colour cue (weight, check). |
| `disabled` | — | `true` `false` | `false` | Not available: dimmed, skipped by the keyboard, ignores the pointer. |
| `interactive` | — | `true` `false` | `false` | Responds to the pointer: hover and press feedback, a pointer cursor. |

## Stories

- [Playground](/?path=/story/components-molecules-listitem--playground) · frame: `/iframe.html?id=components-molecules-listitem--playground&viewMode=story`
- [Densities](/?path=/story/components-molecules-listitem--densities) · frame: `/iframe.html?id=components-molecules-listitem--densities&viewMode=story`
- [With avatar](/?path=/story/components-molecules-listitem--with-avatar) · frame: `/iframe.html?id=components-molecules-listitem--with-avatar&viewMode=story`
- [With icon](/?path=/story/components-molecules-listitem--with-icon) · frame: `/iframe.html?id=components-molecules-listitem--with-icon&viewMode=story`
- [Selected](/?path=/story/components-molecules-listitem--selected) · frame: `/iframe.html?id=components-molecules-listitem--selected&viewMode=story`
- [Disabled](/?path=/story/components-molecules-listitem--disabled) · frame: `/iframe.html?id=components-molecules-listitem--disabled&viewMode=story`
- [Danger](/?path=/story/components-molecules-listitem--danger) · frame: `/iframe.html?id=components-molecules-listitem--danger&viewMode=story`
- [With actions](/?path=/story/components-molecules-listitem--with-actions) · frame: `/iframe.html?id=components-molecules-listitem--with-actions&viewMode=story`
- [Grouped](/?path=/story/components-molecules-listitem--grouped) · frame: `/iframe.html?id=components-molecules-listitem--grouped&viewMode=story`

## Decisions that name it

- ADR-005 — Visual operational rules: surfaces, interaction, motion
- ADR-030 — Axis vocabulary: one name, one meaning

## Always

- Tokens only (R04); variants are semantic axes, never appearance (R02).
- Typography and actions are Poesía atoms, never raw HTML with utilities.
- Vibrant panes need a ground and never nest (ADR-027).