ListBox

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

import {ListBox} from './ListBox';

<ListBox aria-label="Favorite animal">
  <ListBoxItem>Aardvark</ListBoxItem>
  <ListBoxItem>Cat</ListBoxItem>
  <ListBoxItem>Dog</ListBoxItem>
  <ListBoxItem>Kangaroo</ListBoxItem>
  <ListBoxItem>Panda</ListBoxItem>
  <ListBoxItem>Snake</ListBoxItem>
</ListBox>

Features

A listbox can be built using the <select> and <option> HTML elements, but this is not possible to style consistently cross browser. ListBox helps you build accessible listbox components that can be styled as needed.

• Item selection – Single or multiple selection, disabled rows, and both toggle and replace selection behaviors.
• Keyboard navigation – List items can be navigated using the arrow keys, along with page up/down, home/end, etc. Typeahead, auto scrolling, and selection modifier keys are supported as well.
• Layout options – Items can be arranged in a vertical or horizontal stack, or as a two-dimensional grid.
• Drag and drop – ListBox supports drag and drop to reorder, insert, or update items via mouse, touch, keyboard, and screen reader interactions.
• Virtualized scrolling – Use Virtualizer to improve performance of large lists by rendering only the visible items.
• Accessible – Follows the ARIA listbox pattern, with support for items and sections, and slots for label and description elements within each item for improved screen reader announcement.

Anatomy