List

Item Selection

First line of content
First line of content
First line of content
First line of content
<List data-test="list-item-selection">
    <ListItem selected>
      <ListItemText primary="First line of content" />
    
    <ListItem>
      <ListItemText primary="First line of content" />
    </ListItem>
    <ListItem selected>
      <ListItemText primary="First line of content" />
    </ListItem>
    <ListItem>
      <ListItemText primary="First line of content" />
    </ListItem>
  </List>
</Playground>

Supporting Visual

A list item may optionally contain a supporting visual. These are not limited to simply icons, but may also be interactive components. When using an interactive component as the supporting visual, the onClick event of the supporting visual will not trigger the ListItem primary action (its onClick event handler).

Loading Spin
First line of content
Loading Spin
First line of content
Second line of content
Loading Spin
First line of content
Second line of content
Third line of content
Action-able (onClick) supporting visual
<List data-test="list-supporting-visual">
    <ListItem
      supportingVisual={
        <Avatar
          size={36}
          src={
            'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
          }
        />
      }
    >
      <ListItemText primary="First line of content" />
    
    <ListItem
      supportingVisual={
        <Avatar
          size={36}
          src={
            'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
          }
        />
      }
    >
      <ListItemText
        primary="First line of content"
        secondary="Second line of content"
      />
    </ListItem>
    <ListItem
      supportingVisual={
        <Avatar
          size={36}
          src={
            'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
          }
        />
      }
    >
      <ListItemText
        primary="First line of content"
        secondary="Second line of content"
        tertiary="Third line of content"
      />
    </ListItem>
    <ListItem
      supportingVisual={
        <IconButton
          icon={AssetIcon}
          onClick={() => console.log('Supporting visual click')}
        />
      }
      onClick={() => console.log('ListItem click')}
    >
      <ListItemText primary="Action-able (onClick) supporting visual" />
    </ListItem>
  </List>
</Playground>

Item Actions

List items are clickable; which represents the primary action. Items may also contain a single, ancillary action; a secondary action.

Clicking a secondary action will not trigger the primary action (onClick event handler on the ListItem).

First line of content
First line of content
Second line of content
First line of content
Second line of content
Third line of content
Loading Spin
First line of content
Loading Spin
First line of content
Second line of content
Loading Spin
First line of content
Second line of content
Third line of content
<List data-test="list-item-actions">
    <ListItem
      onClick={() => console.log('ListItem click')}
      secondaryAction={
        <Button onClick={() => console.log('Secondary action click')}>
          Secondary Action
        
      }
    >
      <ListItemText primary="First line of content" />
    </ListItem>
    <ListItem
      onClick={() => console.log('ListItem click')}
      secondaryAction={
        <Button onClick={() => console.log('Secondary action click')}>
          Secondary Action
        </Button>
      }
    >
      <ListItemText
        primary="First line of content"
        secondary="Second line of content"
      />
    </ListItem>
    <ListItem
      onClick={() => console.log('ListItem click')}
      secondaryAction={
        <Button onClick={() => console.log('Secondary action click')}>
          Secondary Action
        </Button>
      }
    >
      <ListItemText
        primary="First line of content"
        secondary="Second line of content"
        tertiary="Third line of content"
      />
    </ListItem>
    <ListItem
      onClick={() => console.log('ListItem click')}
      secondaryAction={
        <Button onClick={() => console.log('Secondary action click')}>
          Secondary Action
        </Button>
      }
      supportingVisual={
        <Avatar
          size={36}
          src={
            'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
          }
        />
      }
    >
      <ListItemText primary="First line of content" />
    </ListItem>
    <ListItem
      onClick={() => console.log('ListItem click')}
      secondaryAction={
        <Button onClick={() => console.log('Secondary action click')}>
          Secondary Action
        </Button>
      }
      supportingVisual={
        <Avatar
          size={36}
          src={
            'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
          }
        />
      }
    >
      <ListItemText
        primary="First line of content"
        secondary="Second line of content"
      />
    </ListItem>
    <ListItem
      onClick={() => console.log('ListItem click')}
      secondaryAction={
        <Button onClick={() => console.log('Secondary action click')}>
          Secondary Action
        </Button>
      }
      supportingVisual={
        <Avatar
          size={36}
          src={
            'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
          }
        />
      }
    >
      <ListItemText
        primary="First line of content"
        secondary="Second line of content"
        tertiary="Third line of content"
      />
    </ListItem>
  </List>
</Playground>

Keyboard Navigation

List items with primary actions are focus-able. When a list item is focused, then tabbing will focus the list item's supporting visual and then secondary action. Pressing up/down arrow keys will move the focus to the next list item.

All list items are focus-able, even if they do not contain a primary action.

1
2
Loading Spin
3 (not focusable)
Loading Spin
4
<List data-test="list-focusable">
    <ListItem
      onClick={() => console.log('ListItem 1 click')}
      secondaryAction={
        <Button onClick={() => console.log('Secondary action 1 click')}>
          Secondary Action 1
        
      }
      supportingVisual={
        <IconButton
          icon={AssetIcon}
          onClick={() => console.log('Supporting visual 1 click')}
        />
      }
    >
      <ListItemText primary="1" />
    </ListItem>
    <ListItem
      onClick={() => console.log('ListItem 2 click')}
      secondaryAction={
        <Button onClick={() => console.log('Secondary action 2 click')}>
          Secondary Action 2
        </Button>
      }
      supportingVisual={
        <IconButton
          icon={AssetIcon}
          onClick={() => console.log('Supporting visual 2 click')}
        />
      }
    >
      <ListItemText primary="2" />
    </ListItem>
    <ListItem
      secondaryAction={
        <Button onClick={() => console.log('Secondary action click')}>
          Secondary Action
        </Button>
      }
      supportingVisual={
        <Avatar
          size={36}
          src={
            'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
          }
        />
      }
    >
      <ListItemText primary="3 (not focusable)" />
    </ListItem>
    <ListItem
      onClick={() => console.log('ListItem 4 click')}
      secondaryAction={
        <Button onClick={() => console.log('Secondary action click')}>
          Secondary Action
        </Button>
      }
      supportingVisual={
        <Avatar
          size={36}
          src={
            'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
          }
        />
      }
    >
      <ListItemText primary="4" />
    </ListItem>
  </List>
</Playground>

List Item Content Lines

A ListItem may have up to 3 distinct content values; primary, secondary, tertiary. Each value will render on its own line. Content that is too long will be clamped (to a single line only).

A list item text's values can contain click event handlers; triggering one will not trigger the click event handler on the ListItem.

Loading Spin
Long second line of text. Long second line of text. Long second line of text. Long second line of text. Long second line of text. Long second line of text. Long second line of text. Long second line of text. Long second line of text.
Long second line of text. Long second line of text. Long second line of text. Long second line of text. Long second line of text. Long second line of text. Long second line of text. Long second line of text. Long second line of text.
Long third line of text. Long third line of text. Long third line of text. Long third line of text. Long third line of text. Long third line of text. Long third line of text. Long third line of text. Long third line of text.
Loading Spin
Longsecondlineoftext.Longsecondlineoftext.Longsecondlineoftext.Longsecondlineoftext.Longsecondlineoftext.Longsecondlineoftext.Longsecondlineoftext.Longsecondlineoftext.Longsecondlineoftext.
Longsecondlineoftext.Longsecondlineoftext.Longsecondlineoftext.Longsecondlineoftext.Longsecondlineoftext.Longsecondlineoftext.Longsecondlineoftext.Longsecondlineoftext.Longsecondlineoftext.
Longthirdlineoftext.Longthirdlineoftext.Longthirdlineoftext.Longthirdlineoftext.Longthirdlineoftext.Longthirdlineoftext.Longthirdlineoftext.Longthirdlineoftext.Longthirdlineoftext.
<List data-test="list-content-too-long">
    <ListItem
      supportingVisual={
        <Avatar
          size={36}
          src={
            'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
          }
        />
      }
      secondaryAction={
        <Button onClick={() => console.log('Secondary action click')}>
          Secondary Actions
        
      }
    >
      <ListItemText
        primary="Long second line of text. Long second line of text. Long second line of text. Long second line of text. Long second line of text. Long second line of text. Long second line of text. Long second line of text. Long second line of text."
        secondary="Long second line of text. Long second line of text. Long second line of text. Long second line of text. Long second line of text. Long second line of text. Long second line of text. Long second line of text. Long second line of text."
        tertiary="Long third line of text. Long third line of text. Long third line of text. Long third line of text. Long third line of text. Long third line of text. Long third line of text. Long third line of text. Long third line of text."
      />
    </ListItem>
    <ListItem
      supportingVisual={
        <Avatar
          size={36}
          src={
            'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
          }
        />
      }
      secondaryAction={
        <Button onClick={() => console.log('Secondary action click')}>
          Secondary Actions
        </Button>
      }
    >
      <ListItemText
        primary="Longsecondlineoftext.Longsecondlineoftext.Longsecondlineoftext.Longsecondlineoftext.Longsecondlineoftext.Longsecondlineoftext.Longsecondlineoftext.Longsecondlineoftext.Longsecondlineoftext."
        secondary="Longsecondlineoftext.Longsecondlineoftext.Longsecondlineoftext.Longsecondlineoftext.Longsecondlineoftext.Longsecondlineoftext.Longsecondlineoftext.Longsecondlineoftext.Longsecondlineoftext."
        tertiary="Longthirdlineoftext.Longthirdlineoftext.Longthirdlineoftext.Longthirdlineoftext.Longthirdlineoftext.Longthirdlineoftext.Longthirdlineoftext.Longthirdlineoftext.Longthirdlineoftext."
      />
    </ListItem>
  </List>
</Playground>

Dense Lists

A dense list is suited for Lists with items that contain only a primary action. Do not use a dense list if requiring a secondary action.

First line of content
First line of content
Second line of content
First line of content
Second line of content
Third line of content
Loading Spin
First line of content
Loading Spin
First line of content
Second line of content
Loading Spin
First line of content
Second line of content
Third line of content
<List dense>
    <ListItem onClick={() => console.log('ListItem click')}>
      <ListItemText primary="First line of content" />
    
    <ListItem onClick={() => console.log('ListItem click')}>
      <ListItemText
        primary="First line of content"
        secondary="Second line of content"
      />
    </ListItem>
    <ListItem onClick={() => console.log('ListItem click')}>
      <ListItemText
        primary="First line of content"
        secondary="Second line of content"
        tertiary="Third line of content"
      />
    </ListItem>
    <ListItem
      onClick={() => console.log('ListItem click')}
      supportingVisual={
        <Avatar
          size={36}
          src={
            'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
          }
        />
      }
    >
      <ListItemText primary="First line of content" />
    </ListItem>
    <ListItem
      onClick={() => console.log('ListItem click')}
      supportingVisual={
        <Avatar
          size={36}
          src={
            'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
          }
        />
      }
    >
      <ListItemText
        primary="First line of content"
        secondary="Second line of content"
      />
    </ListItem>
    <ListItem
      onClick={() => console.log('ListItem click')}
      supportingVisual={
        <Avatar
          size={36}
          src={
            'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
          }
        />
      }
    >
      <ListItemText
        primary="First line of content"
        secondary="Second line of content"
        tertiary="Third line of content"
      />
    </ListItem>
  </List>
</Playground>

Non-Bordered Lists

First line of content
Second line of content
third line of content
First line of content
Second line of content
third line of content
First line of content
Second line of content
third line of content
<List noBorder>
    <ListItem>
      <ListItemText
        primary="First line of content"
        secondary="Second line of content"
        tertiary="third line of content"
      />
    
    <ListItem>
      <ListItemText
        primary="First line of content"
        secondary="Second line of content"
        tertiary="third line of content"
      />
    </ListItem>
    <ListItem>
      <ListItemText
        primary="First line of content"
        secondary="Second line of content"
        tertiary="third line of content"
      />
    </ListItem>
  </List>
</Playground>

List Width via Parent

Loading Spin
Long second line of text. Long second line of text. Long second line of text. Long second line of text. Long second line of text. Long second line of text. Long second line of text. Long second line of text. Long second line of text.
Long second line of text. Long second line of text. Long second line of text. Long second line of text. Long second line of text. Long second line of text. Long second line of text. Long second line of text. Long second line of text.
Long third line of text. Long third line of text. Long third line of text. Long third line of text. Long third line of text. Long third line of text. Long third line of text. Long third line of text. Long third line of text.
Asset
First line of content
Second line of content
third line of content
<div style={{ width: '300px' }}>
    <SpacedGroup direction="vertical">
      <List data-test="list-parent-width">
        <ListItem
          supportingVisual={
            <Avatar
              size={36}
              src={
                'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
              }
            />
          }
          secondaryAction={<AssetIcon />}
        >
          <ListItemText
            primary="Long second line of text. Long second line of text. Long second line of text. Long second line of text. Long second line of text. Long second line of text. Long second line of text. Long second line of text. Long second line of text."
            secondary="Long second line of text. Long second line of text. Long second line of text. Long second line of text. Long second line of text. Long second line of text. Long second line of text. Long second line of text. Long second line of text."
            tertiary="Long third line of text. Long third line of text. Long third line of text. Long third line of text. Long third line of text. Long third line of text. Long third line of text. Long third line of text. Long third line of text."
          />
        
        <ListItem>
          <ListItemText
            primary="First line of content"
            secondary="Second line of content"
            tertiary="third line of content"
          />
        </ListItem>
      </List>
    </SpacedGroup>
  </div>
</Playground>

Analytics Tracking

<List>
  <ListItem data-trackingid="edit" onClick={() => {}}>
    <ListItemText primary="title" />
  </ListItem>
</List>
title
<List>
    <ListItem data-trackingid="edit" onClick={() => {}}>
      <ListItemText primary="title" />
    
  </List>
</Playground>

API

List

ListItem

ListItemText

VersionOne Components v9.1.0