---
components: List, ListItem, ListItemAvatar, ListItemIcon, ListItemSecondaryAction, ListItemText, ListSubheader, Divider
---

# Lists

[Lists](https://material.google.com/components/lists.html) present multiple line items vertically as a single continuous element.

Lists are made up of a continuous column of rows. Each row contains a tile. Primary actions fill the tile, and supplemental actions are represented by icons and text.

Lists are best suited for similar data types.

### Simple List

{{demo='pages/component-demos/lists/SimpleList.js'}}

### Folder List

{{demo='pages/component-demos/lists/FolderList.js'}}

### Inset List

{{demo='pages/component-demos/lists/InsetList.js'}}

## List Controls

### Checkbox

A checkbox can either be a primary action or a secondary action.

The checkbox is the primary action and the state indicator for the list item. The comment button is a secondary action and a separate target.

{{demo='pages/component-demos/lists/CheckboxList.js'}}

The checkbox is the secondary action for the list item and a separate target.

{{demo='pages/component-demos/lists/CheckboxListSecondary.js'}}

### Switch

The switch is the secondary action and a separate target.

{{demo='pages/component-demos/lists/SwitchListSecondary.js'}}

## Interactive

Below is an interactive demo that lets you explore the visual results of the different settings:

{{demo='pages/component-demos/lists/InteractiveList.js'}}