Advanced

List Box

A list of items from which to choose from.

View source

Props

NameTypeDefaultDescription
activenumber
classesstring[]
Additional CSS classes to set on the list element
footerReactNode
Content that is displayed underneath the list of items inside the dropdown
idstring
isLoadingboolean
Whether the items are currenty loading (being fetched). If true, it will render visual loading placeholders in the ListBox
itemsIItemBoxProps[]
The list of items to display as potential choices
multiboolean
noActiveboolean
If true, no highlight will be rendered on active items. An item is active when using keyboard navigation
noResultItemIItemBoxProps{value: 'No Items'}
The content shown in the list of items when there are no items to display.
onDestroy() => void
onOptionClick(option: IItemBoxProps, index?: number) => void
onRender() => void
selectedstring[]
wrapItems(items: ReactNode) => ReactNode
Useful if you need to wrap the list of items with another component. We use this when combining with the InfiniteScroll HOC
  • itemsThe list of items in the form of a React Component

Examples

No guidelines exist for ListBox yet.

Create guidelines