ListBox

A listbox displays a list of options and allows a user to select one or more of them.

Apple
Banana
Carrot
Spinach

Examples

With disabled keys

Banana
Apple
Carrot
Spinach

Invalid

Banana
Apple
Carrot
Spinach

Borderless

Banana
Apple
Carrot
Spinach

Disabled

Banana
Apple
Carrot
Spinach

Sections

Banana
Apple
Carrot
Spinach

Props

className
string | ((values: ListBoxRenderProps & { defaultClassName: string; }) => string)
id
string
style
CSSProperties | ((values: ListBoxRenderProps & { defaultStyle: CSSProperties; }) => CSSProperties)
onFocus
((e: FocusEvent<Element, Element>) => void)
onBlur
((e: FocusEvent<Element, Element>) => void)
onScroll
((e: UIEvent<HTMLDivElement, UIEvent>) => void)
autoFocus
boolean | FocusStrategy
onFocusChange
((isFocused: boolean) => void)
slot
string | null
disabledKeys
Iterable<Key>
items
Iterable<T>
dependencies
readonly any[]
selectionBehavior
SelectionBehavior
onAction
((key: Key) => void)
escapeKeyBehavior
"none" | "clearSelection"'clearSelection'
shouldFocusWrap
boolean
selectionMode
SelectionMode
disallowEmptySelection
boolean
selectedKeys
"all" | Iterable<Key>
defaultSelectedKeys
"all" | Iterable<Key>
onSelectionChange
((keys: Selection) => void)
renderEmptyState
((props: ListBoxRenderProps) => ReactNode)
dragAndDropHooks
DragAndDropHooks
showCheckmarkOnSelected
boolean