List box

ListBox allows the user to select an item from an array of options. Selected items are visually distinct from non-selected items. To ensure efficient space usage, long lists of items are in a scrolling pane that can provide access to options not immediately visible to the user.

Also known as: Option List, Selection List
View source code
Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected

Using the components

When to use

  • To present a set of selectable options that allow users to make a choice for an onward action, such as filtering a data grid, selecting a country or assigning a task.

When not to use

  • If the list items provide navigation, consider using stacked NavigationItems to form a vertical navigation pattern.
  • If the list is likely to contain five items or fewer, consider using RadioButtonGroup.
  • If the list is likely to contain between five and 10 items and doesn't need to be visible at all times, consider placing the list of items within Dropdown.
  • If the list contains more than 10 items and you have limited screen space, consider using a ComboBox.

Import

To import ListBox, Option and OptionGroup from the core Salt package, use:

Props

ListBox

Option

OptionGroup

References