List: React component

A component for creating an ordered or unordered list of items. The List component can be used to create nested lists and supports Flex props. The ListItem component can be used to create list items and supports Text props.

List

Item 1
- Subitem 1
Item 2
- Subitem 1
- Subitem 2
  - Subsubitem 1
  - Subsubitem 2
  - Subsubitem 3
- Subitem 3
Item 3
Item 4

<List as="ol" textVariant="body-default-m" gap="4">
<ListItem>
  Item 1
  <List as="ul" gap="4" paddingLeft="24" marginTop="4">
    <ListItem>Subitem 1</ListItem>
  </List>
</ListItem>
<ListItem>
  Item 2
  <List as="ul" gap="4" paddingLeft="24" marginTop="4">
    <ListItem>Subitem 1</ListItem>
    <ListItem>
      Subitem 2
      <List as="ul" gap="4" paddingLeft="24" marginTop="4">
        <ListItem variant="body-default-s">Subsubitem 1</ListItem>
        <ListItem variant="body-default-s">Subsubitem 2</ListItem>
        <ListItem variant="body-default-s">Subsubitem 3</ListItem>
      </List>
    </ListItem>
    <ListItem>Subitem 3</ListItem>
  </List>
</ListItem>
<ListItem>Item 3</ListItem>
<ListItem>Item 4</ListItem>
</List>

Starting number

A numbered list counts from 1. Pass start to count from another number, for example to continue a list that a paragraph interrupted. It applies to as="ol" only.

List

Item 4
Item 5

<List as="ol" start={4} gap="4">
<ListItem>Item 4</ListItem>
<ListItem>Item 5</ListItem>
</List>

List API reference

	Type	Default
as Bulleted or numbered.	ulol	ul
start The first item's number on a numbered list. Ignored on `ul`.	number	—
children The items.	React.ReactNode	—
className	string	—
style	React.CSSProperties	—
…and every FlexProps prop	inherited	—

ListItem API reference

	Type	Default
children	React.ReactNode	—
className	string	—
style	React.CSSProperties	—
…and every FlexProps prop	inherited	—
…and every TextProps prop	inherited	—