Select

Select

(open in a new window)

Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="select-1">
    Label text goes here
  </label>
  <select class="govuk-select" 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>

Macro

{% from "select/macro.njk" import govukSelect %}

{{ govukSelect({
  "id": "select-1",
  "name": "select-1",
  "label": {
    "text": "Label text goes here"
  },
  "items": [
    {
      "value": 1,
      "text": "GOV.UK frontend option 1"
    },
    {
      "value": 2,
      "text": "GOV.UK frontend option 2",
      "selected": true
    },
    {
      "value": 3,
      "text": "GOV.UK frontend option 3",
      "disabled": true
    }
  ]
}) }}

Select with hint text and error message

(open in a new window)

Code

Markup

<div class="govuk-form-group govuk-form-group--error">
  <label class="govuk-label" for="select-2">
    Label text goes here
  </label>
  <span id="select-2-hint" class="govuk-hint">
    Hint text goes here
  </span>
  <span id="select-2-error" class="govuk-error-message">
  <span class="govuk-visually-hidden">Error:</span> Error message goes here
  </span>
  <select class="govuk-select govuk-select--error" id="select-2" name="select-2" aria-describedby="select-2-hint select-2-error">
      <option value="1">GOV.UK frontend option 1</option>
      <option value="2">GOV.UK frontend option 2</option>
      <option value="3">GOV.UK frontend option 3</option>
  </select>
</div>

Macro

{% from "select/macro.njk" import govukSelect %}

{{ govukSelect({
  "id": "select-2",
  "name": "select-2",
  "label": {
    "text": "Label text goes here"
  },
  "hint": {
    "text": "Hint text goes here"
  },
  "errorMessage": {
    "text": "Error message goes here"
  },
  "items": [
    {
      "value": 1,
      "text": "GOV.UK frontend option 1"
    },
    {
      "value": 2,
      "text": "GOV.UK frontend option 2"
    },
    {
      "value": 3,
      "text": "GOV.UK frontend option 3"
    }
  ]
}) }}

Select with label as page heading

(open in a new window)

Code

Markup

<div class="govuk-form-group">
  <h1 class="govuk-label-wrapper"><label class="govuk-label" for="select-3">
      Label text goes here
    </label>
    </h1>
  <select class="govuk-select" 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>

Macro

{% from "select/macro.njk" import govukSelect %}

{{ govukSelect({
  "id": "select-3",
  "name": "select-3",
  "label": {
    "text": "Label text goes here",
    "isPageHeading": true
  },
  "items": [
    {
      "value": 1,
      "text": "GOV.UK frontend option 1"
    },
    {
      "value": 2,
      "text": "GOV.UK frontend option 2",
      "selected": true
    },
    {
      "value": 3,
      "text": "GOV.UK frontend option 3",
      "disabled": true
    }
  ]
}) }}

Select with full width override

(open in a new window)

Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="select-1">
    Label text goes here
  </label>
  <select class="govuk-select govuk-!-width-full" 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>

Macro

{% from "select/macro.njk" import govukSelect %}

{{ govukSelect({
  "id": "select-1",
  "name": "select-1",
  "classes": "govuk-!-width-full",
  "label": {
    "text": "Label text goes here"
  },
  "items": [
    {
      "value": 1,
      "text": "GOV.UK frontend option 1"
    },
    {
      "value": 2,
      "text": "GOV.UK frontend option 2",
      "selected": true
    },
    {
      "value": 3,
      "text": "GOV.UK frontend option 3",
      "disabled": true
    }
  ]
}) }}

Select with optional form-group classes

(open in a new window)

Code

Markup

<div class="govuk-form-group extra-class">
  <label class="govuk-label" for="select-1">
    Label text goes here
  </label>
  <select class="govuk-select govuk-!-width-full" 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>

Macro

{% from "select/macro.njk" import govukSelect %}

{{ govukSelect({
  "id": "select-1",
  "name": "select-1",
  "classes": "govuk-!-width-full",
  "label": {
    "text": "Label text goes here"
  },
  "formGroup": {
    "classes": "extra-class"
  },
  "items": [
    {
      "value": 1,
      "text": "GOV.UK frontend option 1"
    },
    {
      "value": 2,
      "text": "GOV.UK frontend option 2",
      "selected": true
    },
    {
      "value": 3,
      "text": "GOV.UK frontend option 3",
      "disabled": true
    }
  ]
}) }}