Select allows a user to select options from a menu that is displayed after clicking or tapping into an input.
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.