# List Item

<flow-list-item>

Stable

A List Item is a single option or action in a list.

List Items are used to build up a List of options or actions. See the examples below for the supported types and styles.

# Examples

# List Item Types

Set the List Item type using the type attribute. Supported List Item types are:

list - a text item representing an action or navigation link.
checkbox - a checkbox option item.
radio - a radio option item.

WARNING

A single list must contain items of the same type. Use List Groups to combine list items of different types.

# List Item Icons

Icons may be added to a list item by setting the icon or trailing-icon attribute. See the Icon component for details of how to specify built-in and external icons.

# Two-Line List Items

Set the line-two attribute to create a two-line list item. The primary item text can be set using either the default slot or by setting the line-one attribute.

Note that the two-line attribute must be set on the parent List component to correctly format the two-line items.

# List Item States

List-type List Items can be set to selected or activated following Material Design (opens new window) guidelines. Selection indicates the currently selected item out of a set of items. Activation generally indicates the currently active navigation link.

# Properties

Property	Description	Type	Default
`activated`	Set to `true` to indicate that this item is 'activated', that is, represents a highlighted destination.	`boolean`	`false`
`checked`	Indicate the checked state of a checkbox list item.	`boolean`	`false`
`color`	The color of the list item. Colors are taken from the application palette.	`"danger" \| "gray" \| "primary" \| "secondary" \| "success" \| "warning"`
`disabled`	Set to `true` to disable user interaction with the list item.	`boolean`	`false`
`icon`	Set to display a leading icon before the item text. The property can be the name of a built-in icon, a URL to an SVG file, or an SVG data URI.	`string`
`lineOne` `line-one`	Specifies the first line a two-line list item.	`string`
`lineTwo` `line-two`	Specifies the second line a two-line list item.	`string`
`selected`	Set to `true` to indicate that this item is 'selected', that is, represents a user selection of options.	`boolean`	`false`
`trailingIcon` `trailing-icon`	Set to display a trailing icon after the item text. The property can be the name of a built-in icon, a URL to an SVG file, or an SVG data URI.	`string`
`type`	Specifies the type of the list item. The default type is `"list"`, which displays option icons and item text but no controls.	`"checkbox" \| "list" \| "radio"`	`'list'`
`value`	Specifies the value of the list item. The value is used to identify the list item in list events, to programmatically select a list item, and to set state properties when using application state binding.	`any`

# CSS Custom Properties

Name	Description
`--control-color`	Color of list controls (radio markers and check-boxes) (default: secondary)

← List List Header →