Orbit

List

Source

Bordered, divided rows for settings, menus and records. Compose List with ListItem, and group titled sections with ListGroup.

Overview

List wraps a column of ListItem rows with a border and dividers. Each ListItem lays its children out as a space-between row, so a label and a trailing control align to each edge.

Build row content with Box and Text. Make rows interactive by passing onSelect and toggling selected. ListGroup is a separate primitive for stacking titled sections such as a settings page.

Basic

A list of settings rows, each pairing a label with a trailing Status chip.

Email notifications

On

Two-factor authentication

Off

API access

On
<List size="small">
  <ListItem>
    <Text>Email notifications</Text>
    <Status status="On" color="green" size="small" />
  </ListItem>
  <ListItem>
    <Text>Two-factor authentication</Text>
    <Status status="Off" color="gray" size="small" />
  </ListItem>
  <ListItem>
    <Text>API access</Text>
    <Status status="On" color="green" size="small" />
  </ListItem>
</List>

Selectable

A compact list using size small. Pass selected and onSelect to turn rows into a selectable menu.

Overview

Customers

Invoices

const [selected, setSelected] = useState('overview')

<List size="small">
  {items.map((item) => (
    <ListItem
      key={item.id}
      size="small"
      selected={selected === item.id}
      onSelect={() => setSelected(item.id)}
    >
      <Text>{item.label}</Text>
    </ListItem>
  ))}
</List>

ListGroup

ListGroup stacks titled sections in a single rounded container, separated by borders. Use it for grouped settings or summaries.

Profile

Name, avatar and contact details.

Billing

Payment methods and invoices.

<ListGroup>
  <ListGroup.Item>
    <Text variant="label">Profile</Text>
    <Text color="default">Name, avatar and contact details.</Text>
  </ListGroup.Item>
  <ListGroup.Item>
    <Text variant="label">Billing</Text>
    <Text color="default">Payment methods and invoices.</Text>
  </ListGroup.Item>
</ListGroup>

List props

children

ReactNode

ListItem rows. Renders nothing when empty.

size

"small" | "default"default: 'default'

Controls the corner radius of the list container.

className

string

Classes merged onto the list container.

ListItem props

children

ReactNode

required

Row content. Laid out as a space-between row, so a leading and trailing node sit at each edge.

selected

booleandefault: false

Applies the selected surface treatment.

onSelect

(e: React.MouseEvent) => void

Click handler. When set, the row becomes a pointer target with hover affordance.

size

'small' | 'default'default: 'default'

Controls the row padding.

selectedClassName

string

Extra classes applied only when selected is true.

inactiveClassName

string

Extra classes applied only when selected is false.

className

string

Classes merged onto the row in all states.

ListGroup props

children

ReactNode

Use ListGroup.Item children. Each item is separated by a top border.