Select field

Definition: A select field is a form element that allows you to choose one option from a predefined list.

When to use

Use a select field when you want to choose an option from a predefined list and submit the data.

Anatomy

  1. Label
  2. Right icon
  3. Placeholder + selected value
  4. Call out
  5. Field

 

 

 

 

 

Variations

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

 

 

 

 

States

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