List

Glass list group — static rows or actionable buttons with selection and arrow-key focus.

Preview

Live

  • Overview
  • Resume
  • Cover letter
<ul class="ui-list" aria-label="Packet sections">
  <li class="ui-list__item">Overview</li>
  <li class="ui-list__item is-selected" aria-current="true">Resume</li>
  <li class="ui-list__item">Cover letter</li>
</ul>

Variants

Static

Plain <li> rows — use for read-only navigation or labels.

  • Overview
  • Resume
  • Cover letter

Actionable

Button rows with .ui-list__item--actionable; wrap each in <li role="none">.

Selected

.is-selected + aria-current="true" highlights the current row.

  • Inbox
  • Starred

Accessibility

  • Name the list with aria-label or aria-labelledby when the purpose is not obvious from nearby headings.
  • Selected rows set aria-current="true" (React selected does this).
  • Actionable items are real buttons inside <li role="none"> so the list stays a list and the control stays activatable.
  • React List moves focus among actionable items with Arrow Up/Down, Home, and End.
  • Disabled actionable rows use native disabled (or aria-disabled) and are skipped by keyboard navigation.

API

HTML classes

Class Description
.ui-list Glass list surface on <ul>.
.ui-list__item Row — on <li> or actionable <button>.
.ui-list__item--actionable Interactive button row (full-width, hover, focus).
.is-selected Selected / current row highlight.

React props

From src/core/List.tsx — List extends HTMLAttributes<HTMLUListElement>; ListItem is either an <li> or an actionable <button>.

Prop Type Default Description
List / className string — Merged onto .ui-list.
ListItem / actionable boolean false When true, renders a button inside <li role="none">.
ListItem / selected boolean false Applies .is-selected and aria-current="true".
ListItem / children ReactNode — Row content / label.
ListItem / disabled boolean — Actionable only — native button disabled.