Anatomy

Anatomy.png

  1. Label
  2. Input field
  3. Options list
  4. Option
  5. Action icon

Appearance

Appearance.png

Selects are typically used in a form to assist with consistency in user input, such as when the user's state or country is needed. A clear and concise label provides the user with important information regarding the context of their selection.

Behavior

Selects present a variety of options independent of the other fields or controls.

For scenarios where the user can select more than one option use a checkbox instead.

Selects have five states — default, hover, pressed, focus, and filled. They also have configurations of disabled, error, required, and optional.

States

States.png

Interaction

Interaction.png

Feedback

In the event of a validation error, such as submitting the form without selecting a required option, the bounding box and arrow icon change to red and error text is displayed.