Select

Unable to parse html

const PreviewEn = () => {
  return (
    <Field>
      <Label>Select a mountain</Label>
      <Select defaultValue=''>
        <Select.Option value='' disabled>
          Select a mountain &hellip;
        </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 radio instead
• you are navigating between pages or sections in an application
• the user must select multiple options. Although HTML select supports this through the multiple attribute, it is not user-friendly, especially on mobile. We recommend checkbox or suggestion for a clearer and more accessible solution.

Example

Grouping

Grouping helps organise options into categories, making long lists easier to understand and navigate.

Unable to parse html

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.

Unable to parse html

const DisabledEn = () => {
  return (
    <Field>
      <Label>Select a mountain</Label>
      <Select disabled>
        <Select.Option value='blank'>Select &hellip;</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 select 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.

Unable to parse html

const ReadOnlyEn = () => {
  return (
    <Field>
      <Label>Select a mountain</Label>
      <Select aria-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 (radio) are often easier for users. Select is especially mobile friendly and provides good accessibility because it follows operating system standards. It works well when the user needs to choose one option from a list. If the user needs to select multiple options or filter the list, you should consider using suggestion.

Sort answer options alphabetically unless there is a good reason not to. Be careful about placing the most commonly used option first in cases involving personal or value-based questions, such as religion or political affiliation.

Note: Gov.uk recommends avoiding select in public digital services. Their user testing shows that users often find the component difficult to use correctly. It may be better to ask multiple questions to reduce the number of options to choose from. If you ask the right questions first, radio buttons (radio) can be a better choice.

Select should always have a label. We place the label and description above the field to ensure good visibility on small screens and to avoid issues with error messages.

If select is inside a table and gets its label from the table header, the label can be hidden. However, make sure the label still makes sense, since it will still be read aloud by screen readers.

Text

Keep the label short, preferably on a single line.

Prefer short, established phrases instead of questions in labels when the categories are well known to users, for example “Choose department” instead of “Which department do you work in?”

Consider using questions or more descriptive formulations when the topic and options are less familiar to users.

Answer options should be as short as possible, and each option should follow the same grammatical structure.