Lion Logo Lion Guides Components Docs Blog Toggle darkmode

Listbox: Features

Multiple choice

Add multiple-choice flag to allow multiple values to be selected. This will:

  • keep the listbox overlay open on click of an option
  • display a list of selected option representations next to the text box
  • make the value of type Array instead of String

Orientation

When orientation="horizontal", left and right arrow keys will be enabled, plus the screenreader will be informed about the direction of the options. By default, orientation="vertical" is set, which enables up and down arrow keys.

With multiple-choice flag configured, multiple options can be checked.

Selection-follows-focus

When true, will synchronize activedescendant and selected element on arrow key navigation. This behavior can usually be seen in <select> on the Windows platform. Note that this behavior cannot be used when multiple-choice is true. See wai aria spec

Rotate keyboard navigation

rotate-keyboard-navigation attribute on the listbox will give the first option active state when navigated to the next option from last option.

Disabled options

Navigation will skip over disabled options. Let's disable Artichoke and Brussel sprout, because they're gross.