Select

Select is a flexible input element able to serve a wide variety of use cases. Though flexible, asking "is Select the best tool in this circumstance?" is a healthy exercise. Variants of Select, such as Select with Search, or alternatives like RadioButtonGroup, MaskedInput, or TextInput with suggestions may be more appropriate for crafting an elegant user experience.

Because Select is flexible and familiar, the following questions are helpful to consider alternatives and/or confirm that Select is the most appropriate element:

• Is there a need to conserve screen space? Select may be appropriate.
• Ensuring collection of standardized values? Select may be appropriate.
• Are there less than five options? Consider a CheckBoxGroup or RadioButtonGroup as they may be more efficient for users. Select can hide information and requires extra clicks/taps for users to access that information.
• Are there a large number of options? Lengthy scrolling can be problematic for users. Consider Select with Search or TextInput with suggestions.
• Is the select for a State/Province in the context of collecting an address? Consider only asking for ZIP/Postal Code and automatically determining City, State, Country, etc. without user input.
• Are the values in list well known and understood, such as Year? Consider TextInput with suggestions or MaskedInput.

If multiple selections are permitted and there are more than 5 options, use SelectMultiple. Otherwise, consider using CheckBoxGroup.

Using Select as a form field is preferred for user experience. When Select is used in conjunction with FormField, users receive clear indication for the contents and purpose of the input. Additionally, this use promotes best practices in accessibility by ensuring user inputs are accompanied by labels used by assistive technologies.

The Select input is flexible and may be extended to allow for multi-select, search, and create options.

Allow users to quickly find their desired option by incorporating Search within the Select component.

Select with search is especially useful when presenting lengthy options lists such as when selecting from countries or regions. TextInput with suggestions and MaskedInput are also worth considering in circumstances where values are well known.

Validation styling calls visual attention to the Select input with an error and should be accompanied by text instructing the user how to resolve. A "required" input error is the most common with Select since the available options are typically pre-defined.

Indicates that the Select input exists but cannot be interacted with until a precondition is met.