Select

Adapted

Default

A default select is used to indicate that the select is the main focus of the page.

Show code

<div class="govuk-form-group govuk-form-group--inline">
  <label class="govuk-label" for="select-2">Label text goes here</label>
  <select class="govuk-select" id="select-2" name="select-2">
    <option value="1">GOV.UK frontend option 1</option>
    <option value="2" selected>GOV.UK frontend option 2</option>
    <option value="3" disabled>GOV.UK frontend option 3</option>
  </select>
</div>

---
import { FormGroup, InputLabel, Select, SelectOption } from "@i-dot-ai-npm/component-library-astro";
---

<FormGroup inline>
  <InputLabel for="select-2">Label text goes here</InputLabel>
  <Select id="select-2" name="select-2">
    <SelectOption value="1">GOV.UK frontend option 1</SelectOption>
    <SelectOption value="2" selected>GOV.UK frontend option 2</SelectOption>
    <SelectOption value="3" disabled>GOV.UK frontend option 3</SelectOption>
  </Select>
</FormGroup>

import { FormGroup, InputLabel, Select, SelectOption } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <FormGroup inline>
      <InputLabel htmlFor="select-2">Label text goes here</InputLabel>
      <Select id="select-2" name="select-2">
        <SelectOption value="1">GOV.UK frontend option 1</SelectOption>
        <SelectOption value="2" selected>GOV.UK frontend option 2</SelectOption>
        <SelectOption value="3" disabled>GOV.UK frontend option 3</SelectOption>
      </Select>
    </FormGroup>
  );
}

<script>
  import { FormGroup, InputLabel, Select, SelectOption } from "@i-dot-ai-npm/component-library-svelte";
</script>

<FormGroup inline>
  <InputLabel for="select-2">Label text goes here</InputLabel>
  <Select id="select-2" name="select-2">
    <SelectOption value="1">GOV.UK frontend option 1</SelectOption>
    <SelectOption value="2" selected>GOV.UK frontend option 2</SelectOption>
    <SelectOption value="3" disabled>GOV.UK frontend option 3</SelectOption>
  </Select>
</FormGroup>

import { FormGroup, InputLabel, Select, SelectOption } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <FormGroup inline>
      <InputLabel for="select-2">Label text goes here</InputLabel>
      <Select id="select-2" name="select-2">
        <SelectOption value="1">GOV.UK frontend option 1</SelectOption>
        <SelectOption value="2" selected>GOV.UK frontend option 2</SelectOption>
        <SelectOption value="3" disabled>GOV.UK frontend option 3</SelectOption>
      </Select>
    </FormGroup>
  );
}

Subtle

A subtle select is used to reduce the prominence of the select component. Used for when the select is not the main focus of the page.

Show code

<div class="govuk-form-group govuk-form-group--inline">
  <label class="govuk-label" for="select-1">Label text goes here</label>
  <select class="govuk-select govuk-select--subtle" id="select-1" name="select-1">
    <option value="1">GOV.UK frontend option 1</option>
    <option value="2" selected>GOV.UK frontend option 2</option>
    <option value="3" disabled>GOV.UK frontend option 3</option>
  </select>
</div>

---
import { FormGroup, InputLabel, Select, SelectOption } from "@i-dot-ai-npm/component-library-astro";
---

<FormGroup inline>
  <InputLabel for="select-1">Label text goes here</InputLabel>
  <Select id="select-1" name="select-1" subtle>
    <SelectOption value="1">GOV.UK frontend option 1</SelectOption>
    <SelectOption value="2" selected>GOV.UK frontend option 2</SelectOption>
    <SelectOption value="3" disabled>GOV.UK frontend option 3</SelectOption>
  </Select>
</FormGroup>

import { FormGroup, InputLabel, Select, SelectOption } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <FormGroup inline>
      <InputLabel htmlFor="select-1">Label text goes here</InputLabel>
      <Select id="select-1" name="select-1" subtle>
        <SelectOption value="1">GOV.UK frontend option 1</SelectOption>
        <SelectOption value="2" selected>GOV.UK frontend option 2</SelectOption>
        <SelectOption value="3" disabled>GOV.UK frontend option 3</SelectOption>
      </Select>
    </FormGroup>
  );
}

<script>
  import { FormGroup, InputLabel, Select, SelectOption } from "@i-dot-ai-npm/component-library-svelte";
</script>

<FormGroup inline>
  <InputLabel for="select-1">Label text goes here</InputLabel>
  <Select id="select-1" name="select-1" subtle>
    <SelectOption value="1">GOV.UK frontend option 1</SelectOption>
    <SelectOption value="2" selected>GOV.UK frontend option 2</SelectOption>
    <SelectOption value="3" disabled>GOV.UK frontend option 3</SelectOption>
  </Select>
</FormGroup>

import { FormGroup, InputLabel, Select, SelectOption } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <FormGroup inline>
      <InputLabel for="select-1">Label text goes here</InputLabel>
      <Select id="select-1" name="select-1" subtle>
        <SelectOption value="1">GOV.UK frontend option 1</SelectOption>
        <SelectOption value="2" selected>GOV.UK frontend option 2</SelectOption>
        <SelectOption value="3" disabled>GOV.UK frontend option 3</SelectOption>
      </Select>
    </FormGroup>
  );
}

Error

A error select is used to indicate that the select has an error.

Show code

<div class="govuk-form-group govuk-form-group--inline">
  <label class="govuk-label" for="select-3">Label text goes here</label>
  <select class="govuk-select govuk-select--error" id="select-3" name="select-3">
    <option value="1">GOV.UK frontend option 1</option>
    <option value="2" selected>GOV.UK frontend option 2</option>
    <option value="3" disabled>GOV.UK frontend option 3</option>
  </select>
</div>

---
import { FormGroup, InputLabel, Select, SelectOption } from "@i-dot-ai-npm/component-library-astro";
---

<FormGroup inline>
  <InputLabel for="select-3">Label text goes here</InputLabel>
  <Select id="select-3" name="select-3" error>
    <SelectOption value="1">GOV.UK frontend option 1</SelectOption>
    <SelectOption value="2" selected>GOV.UK frontend option 2</SelectOption>
    <SelectOption value="3" disabled>GOV.UK frontend option 3</SelectOption>
  </Select>
</FormGroup>

import { FormGroup, InputLabel, Select, SelectOption } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <FormGroup inline>
      <InputLabel htmlFor="select-3">Label text goes here</InputLabel>
      <Select id="select-3" name="select-3" error>
        <SelectOption value="1">GOV.UK frontend option 1</SelectOption>
        <SelectOption value="2" selected>GOV.UK frontend option 2</SelectOption>
        <SelectOption value="3" disabled>GOV.UK frontend option 3</SelectOption>
      </Select>
    </FormGroup>
  );
}

<script>
  import { FormGroup, InputLabel, Select, SelectOption } from "@i-dot-ai-npm/component-library-svelte";
</script>

<FormGroup inline>
  <InputLabel for="select-3">Label text goes here</InputLabel>
  <Select id="select-3" name="select-3" error>
    <SelectOption value="1">GOV.UK frontend option 1</SelectOption>
    <SelectOption value="2" selected>GOV.UK frontend option 2</SelectOption>
    <SelectOption value="3" disabled>GOV.UK frontend option 3</SelectOption>
  </Select>
</FormGroup>

import { FormGroup, InputLabel, Select, SelectOption } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <FormGroup inline>
      <InputLabel for="select-3">Label text goes here</InputLabel>
      <Select id="select-3" name="select-3" error>
        <SelectOption value="1">GOV.UK frontend option 1</SelectOption>
        <SelectOption value="2" selected>GOV.UK frontend option 2</SelectOption>
        <SelectOption value="3" disabled>GOV.UK frontend option 3</SelectOption>
      </Select>
    </FormGroup>
  );
}

When to use this component

The select component should only be used as a last resort in public-facing services because research shows that some users find selects very difficult to use.

When not to use this component

The select component allows users to choose an option from a long list. Before using the select component, try asking users questions which will allow you to present them with fewer options.

Asking questions means you’re less likely to need to use the select component, and can consider using a different solution, such as a Radios component.

Deviation from GOV.UK Design System

Explanation here