ListRow

A ListRow is one row of a list: a person, an agent, a setting or a shortcut into another page. The whole row is the target. Use it for the agents and people on a detail or profile page, and for settings. Raft Chat's phone lists of places (Home, Members, the Settings list) use the sidebar row instead (Choosing a component).

跟随页面浅色深色并排

When to use

Anatomy

• ListRow: the row. A button by default; render a link for a row that goes somewhere.
• Leading block: an Avatar, a channel tile (IconTile) or a 20px ListRowIcon. Optional.
• ListRowBody: the text column. Required.
  • ListRowTop: ListRowTitle, then the time in ListRowMeta.
  • ListRowBottom: the preview in ListRowDescription, then at most one badge.
• Trailing: a setting's ListRowValue and ListRowChevron, or a Switch. Optional.
• ListRowGroup: an inset group that wraps rows in a card. Optional.

In a plain row with a description, both ends center on the title's first line instead of the middle of the title and description: the leading icon, avatar or tile, and the trailing value, chevron, switch, checkbox or radio. Each keeps its size, so the row still accounts for a 30px switch. With a title alone, the title is the whole block and everything stays centered at the row's height, 54px on a phone with a switch (Alignment).

Variants

跟随页面浅色深色并排

跟随页面浅色深色并排

States

tone says what the place is to the person. The shared states are in States.

跟随页面浅色深色并排

Behavior

• Divide rows with line-hairline. In the default variant the line starts where the text starts; in a settings list it starts at the row's edge (16px); entry rows have no lines between them, because they are a set of buttons, not a list of content.
• The whole row is the target: hover lays the subtle tier, fill-subtle, over all of it and press the medium tier (Hover and press). While a menu it opened is up (data-popup-open: a context menu, or press and hold on a phone), it lays fill-subtle too, hovered or not; a selected row keeps its selection.
• A row whose only targets are its own controls (a setting with a switch) takes interactive={false}: it renders a plain element with no hover or press. See States.

Content

• Start a preview with who spoke: "Wug: Release notes are drafted."
• Show at most one badge in a row.
• Set the time and counts in Space Mono; ListRowMeta does this.
• Write a setting's consequence in ListRowDescription with wrap, so it isn't cut off.

Group headings

A group of rows can have a heading above it, such as Channels.

• Write it in sentence case, in text-footnote at weight 700 and foreground-hint (Typography).
• Make the heading a button with aria-expanded when the group can collapse, and show the number of rows when it is collapsed.
• Put the group's action on the right as an ink text button that underlines on hover (TextLink): Browse.

raft-ui has no exported heading part for these lists yet.

Accessibility

• ListRow uses Base UI's useRender and renders a native button (or the link you pass with render), so the row is reached with Tab and activated with Enter or Space. With interactive={false} it is a div and only its controls are focusable.
• The accessible name is the row's text. Add an accessible name to a badge that is only a number or an icon: aria-label="3 unread", aria-label="Mentions you".
• selected is visual only. Set aria-current or aria-selected on the row yourself.
• Label a switch in a settings row with the row's title (aria-labelledby).
• ListRowIcon and ListRowChevron are hidden from assistive technology.

Rules

• Don't add an ink border or a shadow to a row or a group: a list is content, and an ink border means a control (Color).