Combo box single select

Definition: A single select combo box is a dropdown for choosing a single option from a list.

When to use

Use a combo box with a single select option when you want users to choose only one option from a predefined list.

Anatomy

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

 

 

 

 

 

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. Focused (No results)
  5. Read only (White)
  6. Read only (Grey)
  7. Error
  8. Error focused
  9. Disabled