ListBox

The ListBox component is used to display data.

View source code

children
```
(option: T, titleId: string) => ReactNode
```
Render function for each option. @param option Option to render. @param titleId Unique identifer that labels the checkbox.
getOptionId
```
(option: T) => string
```
Get unique identifer for a given option. @param option Option from which to retrieve the identifer.
options
```
T[]
```
Options in the collection.
checkedOptionIds
```
string[]
```
The current checked unique identifiers in the collection.
className
```
string
```
className for the element.
emptyState
```
{ title: string; subtitle?: ReactNode; }
```
Defined the look of the list when no option are provided.
footer
```
ReactNode
```
Footer of the listbox
getIsOptionActive
```
(option: T) => boolean
```
Get whether a given option should be active. By default, all options are not active.
getIsOptionCheckable
```
(option: T) => boolean
```
Get whether a given option should be checkable. By default, all options can be checked.
getIsOptionDisabled
```
(option: T) => boolean
```
Get whether a given option should be disabled. By default, all options are enabled.
getOptionVariant
```
(option: T) => OptionVariant
```
Get the visual style of the option
groupBy
```
(option: T) => string
```
Function to group options together.
header
```
ReactNode
```
Header of the listbox
onAllOptionsChange
```
(options: T[], optionIds: string[], isChecked: boolean) => void
```
Handler that is called when the top checkbox state changes. @param options Options associated to the changed checkboxes @param optionIds Option's unique identifiers @param isSelected Whether the options are checked
onOptionChange
```
(option: T, optionId: string, isChecked: boolean) => void
```
Handler that is called when an option state changes. @param option Option associated to the changed checkbox. @param optionId Option's unique identifier. @param isSelected Whether the option is checked.
onOptionClick
```
(option: T) => void
```
Handler that is called when an option is clicked
renderGroupedOptionsHeader
```
(value: string, aggregatedOptions: T[]) => ReactNode
```
Render function for grouped option
rowHeight
```
"compact" | "normal"
```
The size of the options.
Default: normal