Selectors allow a user to input data into a form by selecting an option from a list.


Selection controls are found on panels that require users to make decisions or declare preferences, such as settings or dialogs.

See the Pen Selectors by USANA UX (@usana_ux) on CodePen.


Use the select component only when a user wants to choose from eight to twenty possible options and you have limited display space.


  1. Label: The label of an input area is often positioned to the left. The label specifies the sort of information needed.
  2. Select field: The field that users clicks to into to view available options. The selection will display in the text entry after being chosen.
  3. Select input: Displays the menu dropdown selection.
  4. Menu: This section provides a list of all selectable items.
  5. Menu items: Displays what options have been selected or not selected.


Designers and developers can create correct, pixel-perfect selectors by implementing these specifications.

Best Practices

  1. You should arrange your choices in a logical manner.
  2. Place things in alphabetical order to avoid localization issues.
  3. Your options should be clearly stated and expressed in terms that are commonly known.
  4. Make sure that field labels and helper text work together to clarify field inputs rather than relying on placeholder text.
  • 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.
  • 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.