React List Box Component API

The controlled highlighted value. Pair it with onActiveChange; for the uncontrolled mode use defaultActive instead.

The field that keeps the focus, as an element, a ref or a CSS selector. The React List Box component drops the roving tabindex, gives the options ids, and writes aria-activedescendant and aria-controls on the field, which also handles the keyboard.

Provides an accessible name for the options of the React List Box component.

Provides an accessible name for the search field.

The options, either as CListBoxOption elements — with an optional CListBoxHeader among them — or as a function rendering one option of items.

Adds custom classes to the React List Box root element.

Puts a counter at the end of the header, which the React List Box component renders itself when the markup carries none. It counts the selected options among the visible, enabled ones, so a full count means every option on screen is selected.

The initial highlighted value for the uncontrolled mode. Ignored when active is set.

The initial selected values for the uncontrolled mode. Ignored when selected is set. In single mode only the first one is taken. A disabled value is taken too: disabled keeps the user out, not your code.

Turns the whole list box off and writes aria-disabled on it.

The content rendered above the options, as an alternative to passing CListBoxHeader among the children. It takes any node, so a search field can sit between the header and the options.

Puts a mark in front of every option. checkbox renders the check the multi-value pickers use, and the select-all option reports a partial selection as indeterminate.

Renders the options from data instead of children. Pass a function as children to render one of them yourself.

Covers the wait: it writes aria-busy on the options, shows a row with a spinner and loadingLabel below them, announces that text when the wait starts or the list shows up waiting, and holds the empty state back. The options stay usable.

Text of the loading row, announced to screen readers when the list starts loading on the page or shows up loading.

Callback fired when an option is activated in none mode or when the option is a link.

Callback fired when the highlight moves.

Callback fired with the query of the search field, every time it changes.

Callback fired when the selected values change.

Callback fired when selectionLimit refuses a value. It reports the limit and the first value it turned down.

The id of the element carrying role="listbox", so a field outside the list box can point its aria-controls at it. Generated when left out.

Caps the height of the options and turns them into a scroll container. Takes a number of pixels or any CSS length.

The query of a field of your own, which filters the options the way the built-in search does. The built-in field steps aside while it is set.

Puts a search field between the header and the options. It hides what does not match, which takes those options out of the navigation, out of the counter and out of the select-all scope — the selection itself survives. 'external' hides nothing and only reports the query through onSearch.

Compares the query and the option labels without their diacritics, so zoe finds Zoë. It normalizes to NFD and drops the combining diacritics, which leaves the labels themselves untouched.

The placeholder of the search field.

Turns every section label into a tri-state toggle over the options it holds. It joins the arrow order and reports aria-pressed, which reads mixed while part of the section is selected. multiple mode only.

The controlled selected values. Pair it with onSelectedChange; for the uncontrolled mode use defaultSelected instead.

The header's count text. A function (count, total) => string, or a string in which {count} and {total} are replaced.

The number of values multiple mode accepts. Once the selection holds that many, further ones are refused and reported through onSelectionLimit; deselecting always works and no option turns disabled.

Decides what a click and Space do: none never selects and calls onAction, single keeps one value, multiple keeps any number of them.

Blurs whatever sits behind the React List Box component and thins its background.

Move the highlight to the option matching what the user types. The buffer resets after 500 ms.

Renders the options of items through a virtual scroller, so a long list costs only the rows on screen. The selection, the navigation and the search are untouched — the scroller is the window, not the model.

The number of options the virtual scroller keeps on screen.

Adds custom classes to the React List Box Empty element.

Adds custom classes to the React List Box Header element.

Adds custom classes to the React List Box Option element.

Adds a second line under the option's name. Typeahead then matches the label alone, so typing skips the description.

Takes the option out of the keyboard order and out of every selection method.

Takes the option out of the navigation without touching the selection — this is how a filtered list keeps what the user already picked.

The URL the option goes to. The option is rendered as a link, navigates on click and on Enter, and calls onAction on the way out.

The text typeahead matches. Defaults to the option's label.

The value the option carries. It is what the selection reports and what the methods take, so an option can be hidden or re-rendered without disturbing the selection. Defaults to the option's text.

Adds custom classes to the React List Box Section element.

Disables every option in the section.

Names the group of options. It is rendered above them and announced with the group.

The label of the switch. Defaults to Select all.

Adds custom classes to the React List Box Select All element.

Shows the button in the partial state. Read only together with selected, and ignored while selected is true.

Callback fired when the button is pressed. The value is the state the button asks for.

Whether everything the button stands for is selected. When set, the button renders that state and leaves the acting to onToggle — the scope it works on is then yours to define.

Component used for the root node. Either a string to use a HTML element or a component.

Adds custom classes to the React List Box Subtitle element.

Component used for the root node. Either a string to use a HTML element or a component.

Adds custom classes to the React List Box Title element.