Dropdown

Definition: A dropdown is a compact list of choices.

When to use

Use a dropdown for presenting long lists of items without overwhelming the user with too many options visible at once.

Anatomy

  1. Label
  2. Right icon
  3. Inputs
  4. Call out
  5. Field

 

 

 

 

 

Variations

  1. Top label (Recommended for forms as it can help improve accessibility.)
  2. Left label (For legacy products)

 

 

 

 

States

  1. Enabled
  2. Hover
  3. Focused
  4. Read only (white)
  5. Read only (grey)
  6. Error
  7. Error focused
  8. Disabled