Components
Select
Select allows users to choose an option from a list.
React
const PreviewEn = () => { return ( <Field> <Label>Select a mountain</Label> <Select defaultValue=''> <Select.Option value='' disabled> Select a mountain … </Select.Option> <Select.Option value='everest'>Mount Everest</Select.Option> <Select.Option value='aconcagua'>Aconcagua</Select.Option> <Select.Option value='denali'>Denali</Select.Option> <Select.Option value='kilimanjaro'>Kilimanjaro</Select.Option> <Select.Option value='elbrus'>Elbrus</Select.Option> <Select.Option value='vinson'>Mount Vinson</Select.Option> <Select.Option value='puncakjaya'>Puncak Jaya</Select.Option> <Select.Option value='kosciuszko'>Mount Kosciuszko</Select.Option> </Select> </Field> ); }; render(<PreviewEn />)
Use Select when
- you need to display many options and the user can choose only one
- you need a compact way of presenting a long list of options
Avoid Select when
- you have only a few options and enough space — use
Radioinstead - you are navigating between pages or sections in an application
- the user must select multiple options. Although HTML select supports this through the
multipleattribute, it is not user-friendly, especially on mobile. We recommendCheckboxorSuggestionfor a clearer and more accessible solution.
Example
Grouping
Grouping helps organise options into categories, making long lists easier to understand and navigate.
React
const WithOptgroupEn = () => { return ( <Field> <Label>Select a park</Label> <Select> <Select.Optgroup label='Grünerløkka'> <Select.Option value='sofienbergparken'> Sofienberg Park </Select.Option> <Select.Option value='birkelunden'>Birkelunden</Select.Option> <Select.Option value='olafryesplass'>Olaf Ryes Plass</Select.Option> </Select.Optgroup> <Select.Optgroup label='City centre'> <Select.Option value='slottsparken'>The Palace Park</Select.Option> <Select.Option value='studenterlunden'>Studenterlunden</Select.Option> </Select.Optgroup> <Select.Optgroup label='Old Oslo'> <Select.Option value='botsparken'>Botsparken</Select.Option> <Select.Option value='klosterenga'>Klosterenga Park</Select.Option> </Select.Optgroup> </Select> </Field> ); }; render(<WithOptgroupEn />)
Disabled
Avoid disabling Select if you can. It may be difficult for users to understand why the field cannot be used. Read more about why disabled states are problematic (nav.no) and which alternatives exist.
React
const DisabledEn = () => { return ( <Field> <Label>Select a mountain</Label> <Select disabled> <Select.Option value='blank'>Select …</Select.Option> <Select.Option value='everest'>Mount Everest</Select.Option> </Select> </Field> ); }; render(<DisabledEn />)
ReadOnly
Use readOnly when you want to show a preselected value in a Select component without allowing the user to change it. This can be useful when the value is determined by the system or by an earlier step in a process and should not be editable.
React
const ReadOnlyEn = () => { return ( <Field> <Label>Select a mountain</Label> <Select readOnly value='everest'> <Select.Option value='everest'>Mount Everest</Select.Option> </Select> </Field> ); }; render(<ReadOnlyEn />)
Guidelines
Use Select when there are 7 or more options. For fewer options, radio buttons may be easier for users. Select is especially user-friendly on mobile and provides good accessibility, as it follows the operating system’s native behaviour. It works well when the user must choose one option from a list. If users need to select multiple options or filter the list, consider using Suggestion.
Note: Gov.uk recommends avoiding select in public digital services. Their user research shows that people often find the component difficult to use correctly. It may be better to ask additional questions to reduce the number of options. If you ask the right questions first, radio buttons may be a better choice.
Text
The Select component must always have a label. Place the label and any description above the field to ensure good visibility on small screens and to avoid issues when error messages appear. Keep the label short, preferably on a single line.
If a Select is placed inside a table and receives its label from the table header, you may hide the visual label. However, ensure the label text still makes sense, as screen readers will announce it.