Skip to Content

List

A list displays a collection of items and allows a user to select one or more of them.

One
Two
Three
Four
Five

Separators

One
Two
Three
Four
Five

Sections

One
Two
Three
Four
Five

Single select

One
Two
Three
Four
Five

Multiple select

One
Two
Three
Four
Five

Preselected

One
Two
Three
Four
Five

Component props

List

NameTypeDescription
selectionModeSelectionMode"none" | "single" | "multiple"
selectedKeysstring[]Controlled selected keys
defaultSelectedKeysstring[]Default selected keys
onSelectionChange(keys: Selection) => voidCalled when selection changes

ListItem

NameTypeDescription
idstringUnique item identifier
textValuestringText value for accessibility
isDisabledbooleanDisables the item