Best practices
The Select component uses HTML’s native select input. Select inputs can be single value selections. Consider using selects when you have 4 or more options to choose from.
When to use
- Use to let a user choose a single option from an options menu.
- Use when you have 4 or more options to choose from.
- Use when the number of options are dynamic.
- Use helper and placeholder text to provide additional, non-critical instructions.
When not to use
- Avoid using selects when there is less than 4 options. Consider using radio buttons instead.
- Avoid using select fields for navigational purposes..
Anatomy
- Label
- Field default value
- Helper text (optional): Assistive text that can provide additional aid or context to the user. Often used to explain the correct data format or limitations.
- Select menu: Customisable menu with a predefined set of options.
- Select menu item
- Group title (optional)
- Scroll bar (optional): For designers to indicate menu items overflowing a dropdown menu.
- Error message
Behaviour
On iOS devices the dropdown render the OS native equivalent - on iOS the picker
Content guidelines
Labels should:
- Be clearly labelled based on what the option will do
- Give a short description (1–3 words) of the input.
- Avoid punctuation and articles (“the”, “an”, “a”).
- Be descriptive, not instructional. If the selection needs more explanation, use helper text below the field.
Option list should:
- Be listed alphabetically or in another logical order so customers/users can easily find the option they need.