Components
Select
- Overview
- Usage
Overview
When to use
Use the select component only when a user needs to choose from 6 or more possible options and you have limited space to display the options.
When not to use
Use radio buttons if the user must select only one option from a list of five or fewer options.
Principles
Selects should always have labels, and in most cases the label should be visible.
Try to avoid dropdown options that span over one line. Aim for short texts for all options.
If you use the component for settings, you can make an option pre-selected by default when users first see it.
If you use the component for questions, you should not pre-select any of the options as this makes it more likely that users will:
- not realise they’ve missed a question
- submit the wrong answer
Size
Regular size
Compact size
Required indicator
Regular size