List

The List component creates an unordered list (by default) based on child items or an array of items.

Default example with items prop

  • List item 1
  • List item 2
  • ...and so on
<List items={['List item 1', 'List item 2', '...and so on']} />

Using List.Item child component

  • List item 1
  • List item 2
  • ...and so on
<List>
    <List.Item>List item 1</List.Item>
    <List.Item>List item 2</List.Item>
    <List.Item>...and so on</List.Item>
</List>

Macro and micro-configurability

You can apply item props in one-fell-swoop or individually using either the itemProps prop, or the system props for each List.Item.

Note: Using both itemProps and List.Item-level props is fine; when both are defined, specifically, the same prop in both areas, e.g. color, the List.Item-level props will be given more weight (or specificity), followed by the macro prop.

  • I'm a blue list item per itemProps
  • I'm a pink list item with extra bottom margin
  • I'm a bold list item with larger font-size per item-level def, and blue per itemProps
<List itemProps={{color: 'blue.5'}}>
    <List.Item color='blue.5'>I'm a blue list item per itemProps</List.Item>
    <List.Item mb={5} color='pink'>I'm a pink list item with extra bottom margin</List.Item>
    <List.Item fontWeight='bold' fontSize={3}>I'm a bold list item with larger font-size per item-level def, and blue per itemProps</List.Item>
</List>

System props

List components get COMMON, LAYOUT and TYPOGRAPHY system props. Read the System Props doc page for a full list of available props.

Component props

NameTypeDefaultDescription
isStringulSets the HTML tag for the component
itemsArrayThe individual items to render a part of the HTML list. Optionally, use the <List.Item child component
itemPropsObjectOptional way of passing common system props to all child list items