List box
List box
Resources
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.
The default list allows a user to make a single selection from the options available.
When multiselect={true}, users can select multiple items from the list box options.
Wrap options in a OptionGroup component to group them together. Use the label prop to provide a label for the group.
Use the disabled prop on the Option component to disable an option. Disabled options are not selectable and are visually distinct from selectable options.
Use the bordered prop to add a border to the list box.
The list box will scroll when the number of options exceeds the height of the list box.
You can supply static content as children to the Option component. This can be used to visually assist users, for example rendering a description for the option as seen in this example.
- Users can benefit from seeing a particular visual with list items. Customize the display as you see fit. For example, if displaying a list of contacts, it may help to provide headshots alongside the option text.
- Place any visual support such as icons, country symbols or avatars to the left of the option text.
The default list allows a user to make a single selection from the options available.
When multiselect={true}, users can select multiple items from the list box options.
Wrap options in a OptionGroup component to group them together. Use the label prop to provide a label for the group.
Use the disabled prop on the Option component to disable an option. Disabled options are not selectable and are visually distinct from selectable options.
Use the bordered prop to add a border to the list box.
The list box will scroll when the number of options exceeds the height of the list box.
You can supply static content as children to the Option component. This can be used to visually assist users, for example rendering a description for the option as seen in this example.
- Users can benefit from seeing a particular visual with list items. Customize the display as you see fit. For example, if displaying a list of contacts, it may help to provide headshots alongside the option text.
- Place any visual support such as icons, country symbols or avatars to the left of the option text.
The default list allows a user to make a single selection from the options available.
When multiselect={true}, users can select multiple items from the list box options.
Wrap options in a OptionGroup component to group them together. Use the label prop to provide a label for the group.
Use the disabled prop on the Option component to disable an option. Disabled options are not selectable and are visually distinct from selectable options.
Use the bordered prop to add a border to the list box.
The list box will scroll when the number of options exceeds the height of the list box.
You can supply static content as children to the Option component. This can be used to visually assist users, for example rendering a description for the option as seen in this example.
- Users can benefit from seeing a particular visual with list items. Customize the display as you see fit. For example, if displaying a list of contacts, it may help to provide headshots alongside the option text.
- Place any visual support such as icons, country symbols or avatars to the left of the option text.