Data Display
List
A list displays a collection of items and allows a user to select one or more of them.
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#
Introduction
One
Two
Three
Summary
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#
| Name | Type | Description |
|---|---|---|
| selectionMode | SelectionMode | "none" | "single" | "multiple" |
| selectedKeys | string[] | Controlled selected keys |
| defaultSelectedKeys | string[] | Default selected keys |
| onSelectionChange | (keys: Selection) => void | Called when selection changes. Keys are always emitted as strings, so numeric ids match string selectedKeys |
A standalone list (one that is not inside a Select or ComboBox) uses a roving tabindex: the
listbox itself is the single tab stop, ArrowUp/ArrowDown/Home/End
move focus between options, and Enter/Space selects the focused option.
ListItem#
| Name | Type | Description |
|---|---|---|
| id | string | Unique item identifier |
| textValue | string | Text value for accessibility |
| isDisabled | boolean | Disables the item |