Skip to main content
Version: 1.0.0

Change log

Components

Select

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

Hint text​

Error state​

Disabled state​