List box

ListBox allows the user to select an item from an array of options. Selected items are visually distinct from nonselected 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

NameTypeDescriptionDefault

Option

NameTypeDescriptionDefault

OptionGroup

NameTypeDescriptionDefault

References