Status
PublishedElement can be used in production | |
PublishedElement can be used in production | |
PublishedElement can be used in production | |
React | In backlogElement is in backlog |
Documentation | PublishedElement can be used in production |
This component allows users to select an option from a list of five or more choices, and generally requires a final submit action to confirm the selection.
PublishedElement can be used in production | |
PublishedElement can be used in production | |
PublishedElement can be used in production | |
React | In backlogElement is in backlog |
Documentation | PublishedElement can be used in production |
The select component has been redesigned to include accessible behaviors and states. It also features new border colors, icons, and text from the new foundations.
Although the select and dropdown components are visually similar, they are used for different purposes. The radio button component can also be used to provide users with a set of options.
Component | Use cases |
---|---|
Select | Use the select component if the user must select only one option from a list of more than five options. Select and dropdown are visually similar, however, the appearance of the select component will be determined by browser and device settings. |
Dropdown | Use the dropdown component to filter, sort, or change page content. Unlike the select component, the dropdown component can be styled to match the look and feel of the design system. Dropdowns can also accommodate multi-select capabilities and different formats. |
Radio button | Use radio buttons if the user must select only one option from a list of five or fewer options. For more than five options, use the select component, which keeps the design compact. |
The select component anatomy features the select input prompt and its parts, as well as menu of options, which is not customizable.
The select prompt contains three primary elements:
When a user selects the input, a list of options drops down from the field.