List props

ListItem props

ListSection props

A real <ul> of <li> rows. The media and text area of a row is the one link or button (href or onClick); trailing controls sit beside it, never inside, so a Switch or a menu button is never nested in an interactive element and never triggers the row. selected sets aria-current; loading sets aria-busy and a labelled spinner; skeleton rows are aria-hidden; a disabled row has no focusable control. A ListSection is a labelled region named by its eyebrow.

data-rebar-component="list" | "list-item" | "list-section", data-rebar-variant on the list and its rows, data-rebar-title-style, data-rebar-selected, data-rebar-highlight, data-rebar-state="loading" | "skeleton" | "disabled"; parts main, media, leading, body, title, description, meta, chip, chevron, trailing.

leadingControl puts an independent control (a round check button) before the main area, beside the row link or button and never inside it, so pressing it does not trigger the row. For inline renaming set editing with a renderEditor that returns an Input: the title is replaced by the editor and the main area becomes a plain element, so the row semantics stay valid (onEdit fires on F2 or a double-click of the title; the app owns the value and commits on Enter or blur). Consecutive ListSections are spaced by --rebar-list-section-gap (24px), or a section's gap prop.

<ListItem title={task.title} leadingControl={<CheckButton aria-label="Done" />} editing={editingId === task.id} onEdit={() => setEditingId(task.id)} renderEditor={() => <Input aria-label="Rename" defaultValue={task.title} onBlur={commit} />} />