Select

Use a select component to allow users to choose a single option from a list of predefined values.

Use select components to:

Present six or more options where space is limited

Capture data from specific, preset values

Display options in a condensed, scannable format

Provide familiar native OS interactions

Show options where only one choice can be selected

Do not use select components:

When there are five or fewer options, use radio buttons instead for better visibility

When users need to select multiple options, use checkboxes instead

For critical or frequently used options — use radio buttons to make all options immediately visible

When the possibilities need additional context or description, use radio buttons with supporting text

Label, hint and select example

Select example and an anatomy breakdown

Select vs radio buttons

Use select for	Use radio buttons for
Six or more options where space is limited	Five or fewer options that should all be visible
Non-critical selections	Critical or frequently used selections
Options with simple, short labels	Options that need additional context or description
Familiar list-based selections	Selections where users need to compare all options