A list item is the content of one row: an optional leading element, a label and an optional trailing element. It is used inside Menu, Overflow menu, List Picker, Drawer link and Filter sections in drawer content.
Tokens, sizes, states and requirements. Values come from the live token package and from Figma: Base List Item.
Resolved from the live token package.
| Part | Use | Token | Value |
|---|
| Breakpoint · size | Text | Trailing icon | Check box / radio area |
|---|---|---|---|
| Desktop · Large | body-md 17/24, 0.32px | 24px | 24px (16px box) |
| Mobile · Large | body-md 16/22, 0.32px | 20px | 24px (16px box) |
| Desktop and mobile · Small | body-sm 14/20, 0.36px | 20px | 20px (14px box) |
sm (640 to 768px) looks like mobile. Small is the same on every breakpoint.
| Leading | Size | Notes |
|---|---|---|
| Icon | 20px | Material Symbols Outlined, weight 300, icon-primary |
| Check box | 16px box in a 24px area | Same box as eco-checkbox; presentational |
| Radio button | 16px circle in a 24px area | Same circle as eco-radio; presentational |
| Color swatch | 16px | Swatch only, no frame |
| Color swatch + frame | 24px frame, 16px swatch | 1px border-secondary; 2px border-selected when selected |
| Image | 48px | Product or brand image, object-fit: cover |
| Trailing | Size | Notes |
|---|---|---|
| Check box, radio | 16px in a 24px area (Small 14px in 20px) | Same as the leading ones |
| Switch | Large 48×24px, Small 32×16px | Track and thumb as eco-switch; on = surface-success-default |
| Attribute | Value |
|---|---|
| Gap between leading, label and trailing | 8px |
| Row height | Set by the container; the tallest part is the image (48px) |
| Padding and margin of the item | None: the container sets the row padding |
| Check box and radio margin | 4px (Large), 3px (Small), so the area is 24px / 20px |
A list item has no padding of its own, so there is no measurement figure. The row padding belongs to the container (a Menu row has 16px on each side).
The gap as a spacing token.
| Part | Value |
|---|---|
| Gap between the parts | space-8 |
| Leading and trailing icon, check box, radio, swatch, image | Figma sizes: literal, no spacing token |
A list item has no hover or focus of its own: the container row draws them. The item reflects selected and disabled. Every item here is live and sits in a demo row that shows the Menu hover (surface-navigation-hover); the hover belongs to the row, not to the list item.
| Part | Unselected | Selected | Disabled |
|---|
Figma shows the enabled item only. Derived here, not in Figma: the selected check box, radio and swatch frame (same look as eco-checkbox, eco-radio and the color swatch tile), and the disabled item.
| Part | Style | Color |
|---|---|---|
| Overline | alt-label-sm uppercase, 12/12 mobile, 14/14 desktop | text-tertiary |
| Label | body-md / body-sm, regular or bold | text-primary |
| Trailing text | Same as the label | text-secondary or text-tertiary |
| Supporting text | body-sm 14/20, max 2 lines | text-tertiary |
Breuer Condensed with ss02, ss03 and ss06. The bold label is weight 600 (Figma 700 minus 100 in this CSS).
| Element | Class | Notes |
|---|---|---|
| Item | list-item, list-item--sm | A flex row. |
| Fill | list-item__fill | Holds the leading element and the label. Grows to push the trailing element to the right. |
| Leading | list-item__icon, __check, __radio, __swatch, __swatch--tile, __image | One of these. |
| Text | list-item__text, __overline, __label, __label--bold, __support | __text is a column for overline, label and supporting text. |
| Trailing | list-item__trail-icon, __trail-text--secondary, __trail-text--tertiary, __check, __radio, __switch | One of these. |
| Type | Class | Use |
|---|---|---|
| Large | list-item | The default. |
| Small | list-item--sm | Compact surfaces. |
| Standalone control | list-item with role="checkbox", "radio" or "switch" | A pointer and a focus ring; the state is aria-checked. |
The item is width: 100% of its container.
| Input | Result |
|---|---|
| Click, Space, Enter | On a standalone item: toggles aria-checked. A radio only selects and clears the others in its radiogroup. |
| Arrow keys | In a radio group: move to the next or previous radio and select it (wraps). |
| Tab | One tab stop per item. In a radio group the checked radio is the tab stop. |
| Disabled | aria-disabled="true" and tabindex="-1": clicks and keys are ignored. |
| Inside a Menu | The row handles clicks, keys, hover and focus. |
| Topic | Requirement |
|---|---|
| Role | A standalone item with a control is role="checkbox", "radio" or "switch" (switch wins over check, check over radio) with aria-checked. |
| State | Inside a container: aria-selected and aria-disabled on the row. The visual (check, dot, frame, switch) must match the attribute (WCAG 4.1.2). |
| Presentational parts | The check box, radio, swatch and switch are aria-hidden. Never put a real <input> inside an option row. |
| Focus | A 2px ring with border-focus, offset 2px, on a standalone item (WCAG 2.4.7, 1.4.11). |
| Color | The state is not shown by color alone: the check, the dot or the thumb position changes too (WCAG 1.4.1). |
| Disabled | Not focusable. Disabled tokens are exempt from contrast requirements. |