Selectors
Selectors allow a user to input data into a form by selecting an option from a list.
Types
Selection controls are found on panels that require users to make decisions or declare preferences, such as settings or dialogs.
Guidelines
Use the select component only when a user wants to choose from eight to twenty possible options and you have limited display space.
Anatomy
- Label: The label of an input area is often positioned to the left. The label specifies the sort of information needed.
- Select field: The field that users clicks to into to view available options. The selection will display in the text entry after being chosen.
- Select input: Displays the menu dropdown selection.
- Menu: This section provides a list of all selectable items.
- Menu items: Displays what options have been selected or not selected.
Specifications
Designers and developers can create correct, pixel-perfect selectors by implementing these specifications.
Best Practices
- You should arrange your choices in a logical manner.
- Place things in alphabetical order to avoid localization issues.
- Your options should be clearly stated and expressed in terms that are commonly known.
- Make sure that field labels and helper text work together to clarify field inputs rather than relying on placeholder text.
Do
- When one option can be selected.
- When you have more than 6 options to select from.
- When it’s unknown how many options there could be.
- There is a specific set of options.
Don't
- When you have less than 6 options to select from.
- Place a label inside a select element.
- Avoid making options in one dropdown menu change based on the input to another.
- Allow users to select more than one option at once.