Basic single select

When to use

Use a basic single select when users need to select only one item from the list.

Anatomy

1. Icon /radio button
2. List box

 

 

 

 

 

States

 

 

1. Enabled
2. Hover
3. Selected
4. Focused (on enabled state)
5. Disabled

 

 

 

 

Variations

 

1. List items with left icon
2. List items with text only
3. List items with top header
4. List items with separator

 

 

 

 

Examples

1. List box with autocomplete and predictive search
2. List box with single select flags