List

Semantic vertical list container with optional dividers, markers, and header.

Examples

Default

Settings

• NotificationsManage notification preferences
• SecurityControl account securityRequired

<List {...args} header="Settings">
  <ListItem
    description="Manage notification preferences"
    endContent={<Icon icon={ChevronRight} size="sm" />}
    label="Notifications"
    startContent={<Icon color="accent" icon={Bell} size="sm" />}
  />
  <ListItem
    description="Control account security"
    endContent={<Badge color="warning" label="Required" />}
    label="Security"
    startContent={<Icon color="success" icon={Shield} size="sm" />}
  />
</List>

With Dividers

• First item
• Second item
• Third item

<List {...args}>
  <ListItem label="First item" />
  <ListItem label="Second item" />
  <ListItem label="Third item" />
</List>

Ordered

Setup steps

1. Create project
2. Invite teammates
3. Configure billing

<List {...args} header="Setup steps">
  <ListItem label="Create project" />
  <ListItem label="Invite teammates" />
  <ListItem label="Configure billing" />
</List>

Disc

• Apples
• Bananas
• Cherries

<List {...args}>
  <ListItem label="Apples" />
  <ListItem label="Bananas" />
  <ListItem label="Cherries" />
</List>

Circle

• Apples
• Bananas
• Cherries

<List {...args}>
  <ListItem label="Apples" />
  <ListItem label="Bananas" />
  <ListItem label="Cherries" />
</List>

Clickable

Actions

• Edit profile
• Notifications
• Security

<List hasDividers header="Actions">
  <ListItem
    label="Edit profile"
    onClick={() => {}}
    startContent={<Icon icon={User} size="sm" />}
  />
  <ListItem
    label="Notifications"
    onClick={() => {}}
    startContent={<Icon icon={Bell} size="sm" />}
  />
  <ListItem
    label="Security"
    onClick={() => {}}
    startContent={<Icon icon={Shield} size="sm" />}
  />
</List>

Links

• Profile
• Settings
• External docs

<List hasDividers>
  <ListItem
    endContent={<Icon icon={ChevronRight} size="sm" />}
    href="/profile"
    label="Profile"
  />
  <ListItem
    endContent={<Icon icon={ChevronRight} size="sm" />}
    href="/settings"
    label="Settings"
  />
  <ListItem
    endContent={<Icon icon={ChevronRight} size="sm" />}
    href="https://example.com"
    label="External docs"
    rel="noopener noreferrer"
    target="_blank"
  />
</List>

Disabled

• Active item
• Disabled item
• Another active item

<List hasDividers>
  <ListItem label="Active item" onClick={() => {}} />
  <ListItem isDisabled label="Disabled item" onClick={() => {}} />
  <ListItem label="Another active item" onClick={() => {}} />
</List>

Selected

• Home
• Dashboard
• Settings

<List hasDividers>
  <ListItem label="Home" onClick={() => {}} />
  <ListItem isSelected label="Dashboard" onClick={() => {}} />
  <ListItem label="Settings" onClick={() => {}} />
</List>

Ordered With Start

Continued steps

4. Deploy to staging
5. Run integration tests
6. Deploy to production

<List {...args} header="Continued steps" start={4}>
  <ListItem label="Deploy to staging" />
  <ListItem label="Run integration tests" />
  <ListItem label="Deploy to production" />
</List>

Mixed Content

• NotificationsManage notification preferences3 new
• Simple item
• FavoritesView and manage saved items
• With end content only

<List hasDividers>
  <ListItem
    description="Manage notification preferences"
    endContent={<Badge color="info" label="3 new" />}
    label="Notifications"
    startContent={<Icon color="accent" icon={Bell} size="sm" />}
  />
  <ListItem label="Simple item" />
  <ListItem
    description="View and manage saved items"
    label="Favorites"
    startContent={<Icon color="warning" icon={Star} size="sm" />}
  />
  <ListItem
    endContent={<Icon icon={ChevronRight} size="sm" />}
    label="With end content only"
  />
</List>

Long Content

• A very long label that might need to be truncated when it exceeds the available spaceThis is a very long description that should demonstrate how the component handles text overflow when the content exceeds the available width of the container
• Short item
• Medium length label for comparisonAnother long description to show consistent behavior

<div style={{maxWidth: 400}}>
  <List hasDividers>
    <ListItem
      description="This is a very long description that should demonstrate how the component handles text overflow when the content exceeds the available width of the container"
      label="A very long label that might need to be truncated when it exceeds the available space"
    />
    <ListItem label="Short item" />
    <ListItem
      description="Another long description to show consistent behavior"
      label="Medium length label for comparison"
    />
  </List>
</div>

API

List

Semantic vertical list container with optional dividers, markers, and header.

Prop	Type	Default	Description
children*	ReactNode	—	List items.
className	string	—	Additional CSS class names applied to the list element.
data-testid	string	—	Test ID applied to the list element.
hasDividers	boolean	false	Whether to show dividers between list items.
header	ReactNode	—	Header content rendered above and associated with the list.
listStyle	"none" | "circle" | "disc" | "decimal"	'none'	List marker style. decimal renders an ordered list.
ref	Ref<HTMLUListElement | HTMLOListElement>	—	Ref forwarded to the list element.
start	number	1	Starting number for ordered lists.
style	CSSProperties	—	Inline styles applied to the list element.

ListItem

Structured list item built on the shared `Item` primitive.

Prop	Type	Default	Description
className	string	—	Additional CSS class names applied to the list item.
data-testid	string	—	Test ID applied to the list item.
description	ReactNode	—	Supporting text shown below the label.
endContent	ReactNode	—	Trailing content rendered after the label area.
href	string	—	Link URL. When set, the content area renders as a link.
isDisabled	boolean	false	Whether the item is disabled.
isSelected	boolean	false	Whether the item is selected.
label*	ReactNode	—	Primary item label.
onClick	MouseEventHandler<HTMLElement>	—	Click handler for interactive items.
ref	Ref<HTMLLIElement>	—	Ref forwarded to the list item.
rel	string	—	Link relationship.
startContent	ReactNode	—	Content rendered before the label area.
style	CSSProperties	—	Inline styles applied to the list item.
target	string	—	Link target.