List

A component for displaying information in a key-value pair list format.
1<Flex align="center" justify="center">
2  <List.Root>
3    <List.Header>User Information</List.Header>
4    <List.Item align="center">
5      <List.Label minWidth="88px">Status</List.Label>
6      <List.Value>Active</List.Value>
7    </List.Item>
8    <List.Item align="center">
9      <List.Label minWidth="88px">Type</List.Label>
10      <List.Value>Premium Account</List.Value>
11    </List.Item>
12    <List.Item align="center">
13      <List.Label minWidth="88px">Created</List.Label>
14      <List.Value>April 24, 2024</List.Value>
15    </List.Item>
16  </List.Root>
17</Flex>

Usage

1import { List } from "@raystack/apsara";

List Props

List.Root Props

Prop

Type

List.Header Props

Prop

Type

List.Item Props

Prop

Type

List.Label Props

Prop

Type

List.Value Props

Prop

Type

Examples

Basic Usage

1<List.Root maxWidth="600px">
2  <List.Header>User Information</List.Header>
3  <List.Item align="center">
4    <List.Label minWidth="88px">Status</List.Label>
5    <List.Value>Active</List.Value>
6  </List.Item>
7</List.Root>

Accessibility

The List component implements proper ARIA attributes for accessibility:

  • List.Root has role="list" and aria-label
  • List.Item has role="listitem"
  • List.Header has role="heading" and aria-level={3}