COMPONENTS
Select
Select allows a user to select options from a menu that is displayed after clicking or tapping into an input.
- Input Text
- Input Field
- Focused Menu Item
- Menu Item
- Menu
Single Select allows the user to pick one option from a menu.
Multiple Select allows the user to pick multiple options from a menu via checkboxes. Once selected, the items are shown as dismissible tags in the input field above.
Select offers three options for labeling – no label, primary label and primary label with supporting text.
There are two positions for icons within the Select input. Leading icons are used to add context to the purpose of the select. Trailing icons can be used for error states and actions such as clearing the field.
Select has the following states — enabled, hovered, focused, selected, disabled, read-only, warning, and error.
After a selection is made in the Multiple Select, the selected item is displayed within the input using the Tag component. Tags can be displayed in either a constrained or unconstrained input field. An unconstrained input expands the height of the field in order to display all tags. A constrained input only displays the number of tags that can fit within the original Select width and appends a numbered tag in the field to indicate the number of additional items selected in the full menu.
Selects can be displayed in large, medium and small sizes.
When a Select is tapped and opened, the Select should move to the center of the viewport above the keyboard. This helps to avoid the menu being cut off by the keyboard interface. Users can tap outside of the select area to return to the closed state of the Select.
If there are 10 or fewer options to choose from, a native mobile picker could be used on mobile web instead of a custom select. This option is not recommended for large datasets as the user will lose the ability to filter the displayed options via text entry since the keyboard cannot be displayed while the native picker is displayed.
- Select placeholder text should offer helpful yet succinct context to the user about what to expect when interacting with the component. Some examples are "Select country", "Search names", and "Filter dashboards".
- Select should only be used when there are more than three options for the user to choose from. If there are three or fewer options and the user must choose one option, use Radio or Single-select control buttons. If there are three or fewer options and the user can choose several options, use Checkbox or Multi-select control buttons.
Contents