List

<Flex align="center" justify="center">
  <List.Root>
    <List.Header>User Information</List.Header>
    <List.Item align="center">
      <List.Label minWidth="88px">Status</List.Label>
      <List.Value>Active</List.Value>
    </List.Item>
    <List.Item align="center">
      <List.Label minWidth="88px">Type</List.Label>
      <List.Value>Premium Account</List.Value>
    </List.Item>
    <List.Item align="center">
      <List.Label minWidth="88px">Created</List.Label>
      <List.Value>April 24, 2024</List.Value>
    </List.Item>
  </List.Root>
</Flex>

Usage

The List component display information in a structured format with labels and values.

import { List } from "@raystack/apsara/v1";
 
<List.Root maxWidth="600px">
  <List.Header>User Information</List.Header>
  <List.Item align="center">
    <List.Label minWidth="88px">Status</List.Label>
    <List.Value>Active</List.Value>
  </List.Item>
</List.Root>;

List Props

List.Root Props

Prop	Type	Default
`maxWidth`	`string \| number`	-
`className`	`string`	-

List.Header Props

Prop	Type	Default
`children`	`ReactNode`	-
`className`	`string`	-

List.Item Props

Prop	Type	Default
`align`	`"start" \| "center" \| "end"`	`"start"`
`children`	`ReactNode`	-
`className`	`string`	-

List.Label Props

Prop	Type	Default
`minWidth`	`string`	-
`children`	`ReactNode`	-
`className`	`string`	-

List.Value Props

Prop	Type	Default
`children`	`ReactNode`	-
`className`	`string`	-

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}

List

On this page