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)—
autoFocus
boolean | FocusStrategy—
onFocus
((e: FocusEvent<Element, Element>) => void)—
onBlur
((e: FocusEvent<Element, Element>) => void)—
onFocusChange
((isFocused: boolean) => void)—
style
CSSProperties | ((values: ListBoxRenderProps & { defaultStyle: CSSProperties; }) => CSSProperties)—
slot
string | null—
id
string—
disabledKeys
Iterable<Key>—
items
Iterable<T>—
dependencies
readonly any[]—
onScroll
((e: UIEvent<HTMLDivElement, UIEvent>) => void)—
selectionBehavior
SelectionBehavior—
shouldSelectOnPressUp
boolean—
shouldFocusOnHover
boolean—
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—