List

Lab component

Also known as

Listbox, Menu, Option List, Selection List

Similar to

Related patterns

Resources

Support

ListNext and ListItemNext allow 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.

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 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 ListNext and ListItemNext from the lab Salt package, use:



Props




ListNext


NameTypeDescriptionDefault


ListItemNext


NameTypeDescriptionDefault


References


Previous Page
List box
Next Page
Menu