Select

These examples are used for automated tests and may not follow service manual best practice.

Select default

Open this example in a new tab: Select default

Sort by

Code

Markup

<div class="nhsuk-form-group">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label" for="example">
      Sort by
    </label>
  </h1>
  <select class="nhsuk-select" id="example" name="example">
    <option value="published">Recently published</option>
    <option value="updated">Recently updated</option>
    <option value="views">Most views</option>
    <option value="comments">Most comments</option>
  </select>
</div>

Macro

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

{{ select({
  label: {
    text: "Sort by",
    isPageHeading: true
  },
  name: "example",
  items: [
    {
      value: "published",
      text: "Recently published"
    },
    {
      value: "updated",
      text: "Recently updated"
    },
    {
      value: "views",
      text: "Most views"
    },
    {
      value: "comments",
      text: "Most comments"
    }
  ]
}) }}

Select with size S label

Open this example in a new tab: Select with size S label

Sort by

Code

Markup

<div class="nhsuk-form-group">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--s" for="custom-size">
      Sort by
    </label>
  </h1>
  <select class="nhsuk-select" id="custom-size" name="example">
    <option value="published">Recently published</option>
    <option value="updated">Recently updated</option>
    <option value="views">Most views</option>
    <option value="comments">Most comments</option>
  </select>
</div>

Macro

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

{{ select({
  label: {
    text: "Sort by",
    size: "s",
    isPageHeading: true
  },
  id: "custom-size",
  name: "example",
  items: [
    {
      value: "published",
      text: "Recently published"
    },
    {
      value: "updated",
      text: "Recently updated"
    },
    {
      value: "views",
      text: "Most views"
    },
    {
      value: "comments",
      text: "Most comments"
    }
  ]
}) }}

Select with size M label

Open this example in a new tab: Select with size M label

Sort by

Code

Markup

<div class="nhsuk-form-group">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--m" for="custom-size">
      Sort by
    </label>
  </h1>
  <select class="nhsuk-select" id="custom-size" name="example">
    <option value="published">Recently published</option>
    <option value="updated">Recently updated</option>
    <option value="views">Most views</option>
    <option value="comments">Most comments</option>
  </select>
</div>

Macro

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

{{ select({
  label: {
    text: "Sort by",
    size: "m",
    isPageHeading: true
  },
  id: "custom-size",
  name: "example",
  items: [
    {
      value: "published",
      text: "Recently published"
    },
    {
      value: "updated",
      text: "Recently updated"
    },
    {
      value: "views",
      text: "Most views"
    },
    {
      value: "comments",
      text: "Most comments"
    }
  ]
}) }}

Select with size L label

Open this example in a new tab: Select with size L label

Sort by

Code

Markup

<div class="nhsuk-form-group">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--l" for="custom-size">
      Sort by
    </label>
  </h1>
  <select class="nhsuk-select" id="custom-size" name="example">
    <option value="published">Recently published</option>
    <option value="updated">Recently updated</option>
    <option value="views">Most views</option>
    <option value="comments">Most comments</option>
  </select>
</div>

Macro

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

{{ select({
  label: {
    text: "Sort by",
    size: "l",
    isPageHeading: true
  },
  id: "custom-size",
  name: "example",
  items: [
    {
      value: "published",
      text: "Recently published"
    },
    {
      value: "updated",
      text: "Recently updated"
    },
    {
      value: "views",
      text: "Most views"
    },
    {
      value: "comments",
      text: "Most comments"
    }
  ]
}) }}

Select with size XL label

Open this example in a new tab: Select with size XL label

Sort by

Code

Markup

<div class="nhsuk-form-group">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--xl" for="custom-size">
      Sort by
    </label>
  </h1>
  <select class="nhsuk-select" id="custom-size" name="example">
    <option value="published">Recently published</option>
    <option value="updated">Recently updated</option>
    <option value="views">Most views</option>
    <option value="comments">Most comments</option>
  </select>
</div>

Macro

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

{{ select({
  label: {
    text: "Sort by",
    size: "xl",
    isPageHeading: true
  },
  id: "custom-size",
  name: "example",
  items: [
    {
      value: "published",
      text: "Recently published"
    },
    {
      value: "updated",
      text: "Recently updated"
    },
    {
      value: "views",
      text: "Most views"
    },
    {
      value: "comments",
      text: "Most comments"
    }
  ]
}) }}

Select with button

Open this example in a new tab: Select with button

Choose location

This can be different to where you went before

Code

Markup

<div class="nhsuk-form-group">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label" for="with-hint">
      Choose location
    </label>
  </h1>
  <div class="nhsuk-hint" id="with-hint-hint">
    This can be different to where you went before
  </div>
  <div class="nhsuk-input-wrapper">
    <select class="nhsuk-select" id="with-hint" name="example" aria-describedby="with-hint-hint">
    <option value="choose">Choose location</option>
    <option value="eastmidlands">East Midlands</option>
    <option value="eastofengland">East of England</option>
    <option value="london">London</option>
    <option value="northeast">North East</option>
    <option value="northwest">North West</option>
    <option value="southeast">South East</option>
    <option value="southwest">South West</option>
    <option value="westmidlands">West Midlands</option>
    <option value="yorkshire">Yorkshire and the Humber</option>
  </select>
    <button class="nhsuk-button nhsuk-button--secondary nhsuk-button--small" data-module="nhsuk-button" type="submit">
      Save
    </button>
  </div>
</div>

Macro

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

{{ select({
  label: {
    text: "Choose location",
    isPageHeading: true
  },
  hint: {
    text: "This can be different to where you went before"
  },
  id: "with-hint",
  name: "example",
  items: [
    {
      value: "choose",
      text: "Choose location"
    },
    {
      value: "eastmidlands",
      text: "East Midlands"
    },
    {
      value: "eastofengland",
      text: "East of England"
    },
    {
      value: "london",
      text: "London"
    },
    {
      value: "northeast",
      text: "North East"
    },
    {
      value: "northwest",
      text: "North West"
    },
    {
      value: "southeast",
      text: "South East"
    },
    {
      value: "southwest",
      text: "South West"
    },
    {
      value: "westmidlands",
      text: "West Midlands"
    },
    {
      value: "yorkshire",
      text: "Yorkshire and the Humber"
    }
  ],
  formGroup: {
    afterInput: {
      html: '<button class="nhsuk-button nhsuk-button--secondary nhsuk-button--small" data-module="nhsuk-button" type="submit">\n  Save\n</button>\n'
    }
  }
}) }}

Select with button and error message

Open this example in a new tab: Select with button and error message

Choose location

This can be different to where you went before

Error: Select a location

Code

Markup

<div class="nhsuk-form-group nhsuk-form-group--error">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label" for="with-hint">
      Choose location
    </label>
  </h1>
  <div class="nhsuk-hint" id="with-hint-hint">
    This can be different to where you went before
  </div>
  <p class="nhsuk-error-message" id="with-hint-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Select a location
  </p>
  <div class="nhsuk-input-wrapper">
    <select class="nhsuk-select nhsuk-select--error" id="with-hint" name="example" aria-describedby="with-hint-hint with-hint-error">
    <option value="choose">Choose location</option>
    <option value="eastmidlands">East Midlands</option>
    <option value="eastofengland">East of England</option>
    <option value="london">London</option>
    <option value="northeast">North East</option>
    <option value="northwest">North West</option>
    <option value="southeast">South East</option>
    <option value="southwest">South West</option>
    <option value="westmidlands">West Midlands</option>
    <option value="yorkshire">Yorkshire and the Humber</option>
  </select>
    <button class="nhsuk-button nhsuk-button--secondary nhsuk-button--small" data-module="nhsuk-button" type="submit">
      Save
    </button>
  </div>
</div>

Macro

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

{{ select({
  label: {
    text: "Choose location",
    isPageHeading: true
  },
  hint: {
    text: "This can be different to where you went before"
  },
  errorMessage: {
    text: "Select a location"
  },
  id: "with-hint",
  name: "example",
  items: [
    {
      value: "choose",
      text: "Choose location"
    },
    {
      value: "eastmidlands",
      text: "East Midlands"
    },
    {
      value: "eastofengland",
      text: "East of England"
    },
    {
      value: "london",
      text: "London"
    },
    {
      value: "northeast",
      text: "North East"
    },
    {
      value: "northwest",
      text: "North West"
    },
    {
      value: "southeast",
      text: "South East"
    },
    {
      value: "southwest",
      text: "South West"
    },
    {
      value: "westmidlands",
      text: "West Midlands"
    },
    {
      value: "yorkshire",
      text: "Yorkshire and the Humber"
    }
  ],
  formGroup: {
    afterInput: {
      html: '<button class="nhsuk-button nhsuk-button--secondary nhsuk-button--small" data-module="nhsuk-button" type="submit">\n  Save\n</button>\n'
    }
  }
}) }}

Select with disabled item

Open this example in a new tab: Select with disabled item

Sort by

Code

Markup

<div class="nhsuk-form-group">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label" for="with-disabled-item">
      Sort by
    </label>
  </h1>
  <select class="nhsuk-select" id="with-disabled-item" name="example">
    <option value="published">Recently published</option>
    <option value="updated">Recently updated</option>
    <option value="views">Most views</option>
    <option value="comments" disabled>Most comments</option>
  </select>
</div>

Macro

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

{{ select({
  label: {
    text: "Sort by",
    isPageHeading: true
  },
  id: "with-disabled-item",
  name: "example",
  items: [
    {
      value: "published",
      text: "Recently published"
    },
    {
      value: "updated",
      text: "Recently updated"
    },
    {
      value: "views",
      text: "Most views"
    },
    {
      value: "comments",
      text: "Most comments",
      disabled: true
    }
  ]
}) }}

Select with divider

Open this example in a new tab: Select with divider

Sort by

Code

Markup

<div class="nhsuk-form-group">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label" for="example">
      Sort by
    </label>
  </h1>
  <select class="nhsuk-select" id="example" name="example">
    <option value="first-name-ascending">First name (A to Z)</option>
    <option value="first-name-descending">First name (Z to A)</option>
    <hr>
    <option value="last-name-ascending">Last name (A to Z)</option>
    <option value="last-name-descending">Last name (Z to A)</option>
  </select>
</div>

Macro

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

{{ select({
  label: {
    text: "Sort by",
    isPageHeading: true
  },
  name: "example",
  items: [
    {
      value: "first-name-ascending",
      text: "First name (A to Z)"
    },
    {
      value: "first-name-descending",
      text: "First name (Z to A)"
    },
    {
      divider: true
    },
    {
      value: "last-name-ascending",
      text: "Last name (A to Z)"
    },
    {
      value: "last-name-descending",
      text: "Last name (Z to A)"
    }
  ]
}) }}

Select with error message

Open this example in a new tab: Select with error message

Choose location

Error: Select a location

Code

Markup

<div class="nhsuk-form-group nhsuk-form-group--error">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label" for="with-error-message">
      Choose location
    </label>
  </h1>
  <p class="nhsuk-error-message" id="with-error-message-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Select a location
  </p>
  <select class="nhsuk-select nhsuk-select--error" id="with-error-message" name="example" aria-describedby="with-error-message-error">
    <option value="choose">Choose location</option>
    <option value="eastmidlands">East Midlands</option>
    <option value="eastofengland">East of England</option>
    <option value="london">London</option>
    <option value="northeast">North East</option>
    <option value="northwest">North West</option>
    <option value="southeast">South East</option>
    <option value="southwest">South West</option>
    <option value="westmidlands">West Midlands</option>
    <option value="yorkshire">Yorkshire and the Humber</option>
  </select>
</div>

Macro

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

{{ select({
  label: {
    text: "Choose location",
    isPageHeading: true
  },
  errorMessage: {
    text: "Select a location"
  },
  id: "with-error-message",
  name: "example",
  items: [
    {
      value: "choose",
      text: "Choose location"
    },
    {
      value: "eastmidlands",
      text: "East Midlands"
    },
    {
      value: "eastofengland",
      text: "East of England"
    },
    {
      value: "london",
      text: "London"
    },
    {
      value: "northeast",
      text: "North East"
    },
    {
      value: "northwest",
      text: "North West"
    },
    {
      value: "southeast",
      text: "South East"
    },
    {
      value: "southwest",
      text: "South West"
    },
    {
      value: "westmidlands",
      text: "West Midlands"
    },
    {
      value: "yorkshire",
      text: "Yorkshire and the Humber"
    }
  ]
}) }}

Select with hint

Open this example in a new tab: Select with hint

Choose location

This can be different to where you went before

Code

Markup

<div class="nhsuk-form-group">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label" for="with-hint">
      Choose location
    </label>
  </h1>
  <div class="nhsuk-hint" id="with-hint-hint">
    This can be different to where you went before
  </div>
  <select class="nhsuk-select" id="with-hint" name="example" aria-describedby="with-hint-hint">
    <option value="choose">Choose location</option>
    <option value="eastmidlands">East Midlands</option>
    <option value="eastofengland">East of England</option>
    <option value="london">London</option>
    <option value="northeast">North East</option>
    <option value="northwest">North West</option>
    <option value="southeast">South East</option>
    <option value="southwest">South West</option>
    <option value="westmidlands">West Midlands</option>
    <option value="yorkshire">Yorkshire and the Humber</option>
  </select>
</div>

Macro

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

{{ select({
  label: {
    text: "Choose location",
    isPageHeading: true
  },
  hint: {
    text: "This can be different to where you went before"
  },
  id: "with-hint",
  name: "example",
  items: [
    {
      value: "choose",
      text: "Choose location"
    },
    {
      value: "eastmidlands",
      text: "East Midlands"
    },
    {
      value: "eastofengland",
      text: "East of England"
    },
    {
      value: "london",
      text: "London"
    },
    {
      value: "northeast",
      text: "North East"
    },
    {
      value: "northwest",
      text: "North West"
    },
    {
      value: "southeast",
      text: "South East"
    },
    {
      value: "southwest",
      text: "South West"
    },
    {
      value: "westmidlands",
      text: "West Midlands"
    },
    {
      value: "yorkshire",
      text: "Yorkshire and the Humber"
    }
  ]
}) }}

Select with hint and error

Open this example in a new tab: Select with hint and error

Choose location

This can be different to where you went before

Error: Select a location

Code

Markup

<div class="nhsuk-form-group nhsuk-form-group--error">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label" for="with-hint-error">
      Choose location
    </label>
  </h1>
  <div class="nhsuk-hint" id="with-hint-error-hint">
    This can be different to where you went before
  </div>
  <p class="nhsuk-error-message" id="with-hint-error-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Select a location
  </p>
  <select class="nhsuk-select nhsuk-select--error" id="with-hint-error" name="example" aria-describedby="with-hint-error-hint with-hint-error-error">
    <option value="choose">Choose location</option>
    <option value="eastmidlands">East Midlands</option>
    <option value="eastofengland">East of England</option>
    <option value="london">London</option>
    <option value="northeast">North East</option>
    <option value="northwest">North West</option>
    <option value="southeast">South East</option>
    <option value="southwest">South West</option>
    <option value="westmidlands">West Midlands</option>
    <option value="yorkshire">Yorkshire and the Humber</option>
  </select>
</div>

Macro

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

{{ select({
  label: {
    text: "Choose location",
    isPageHeading: true
  },
  hint: {
    text: "This can be different to where you went before"
  },
  errorMessage: {
    text: "Select a location"
  },
  id: "with-hint-error",
  name: "example",
  items: [
    {
      value: "choose",
      text: "Choose location"
    },
    {
      value: "eastmidlands",
      text: "East Midlands"
    },
    {
      value: "eastofengland",
      text: "East of England"
    },
    {
      value: "london",
      text: "London"
    },
    {
      value: "northeast",
      text: "North East"
    },
    {
      value: "northwest",
      text: "North West"
    },
    {
      value: "southeast",
      text: "South East"
    },
    {
      value: "southwest",
      text: "South West"
    },
    {
      value: "westmidlands",
      text: "West Midlands"
    },
    {
      value: "yorkshire",
      text: "Yorkshire and the Humber"
    }
  ]
}) }}

Select without page heading

Open this example in a new tab: Select without page heading

Sort by

Code

Markup

<div class="nhsuk-form-group">
  <label class="nhsuk-label" for="without-heading">
    Sort by
  </label>
  <select class="nhsuk-select" id="without-heading" name="example">
    <option value="published">Recently published</option>
    <option value="updated">Recently updated</option>
    <option value="views">Most views</option>
    <option value="comments">Most comments</option>
  </select>
</div>

Macro

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

{{ select({
  label: {
    text: "Sort by"
  },
  id: "without-heading",
  name: "example",
  items: [
    {
      value: "published",
      text: "Recently published"
    },
    {
      value: "updated",
      text: "Recently updated"
    },
    {
      value: "views",
      text: "Most views"
    },
    {
      value: "comments",
      text: "Most comments"
    }
  ]
}) }}

Select with selected value

Open this example in a new tab: Select with selected value

Sort by

Code

Markup

<div class="nhsuk-form-group">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label" for="with-value">
      Sort by
    </label>
  </h1>
  <select class="nhsuk-select" id="with-value" name="example">
    <option value="published">Recently published</option>
    <option value="updated" selected>Recently updated</option>
    <option value="views">Most views</option>
    <option value="comments">Most comments</option>
  </select>
</div>

Macro

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

{{ select({
  label: {
    text: "Sort by",
    isPageHeading: true
  },
  id: "with-value",
  name: "example",
  value: "updated",
  items: [
    {
      value: "published",
      text: "Recently published"
    },
    {
      value: "updated",
      text: "Recently updated"
    },
    {
      value: "views",
      text: "Most views"
    },
    {
      value: "comments",
      text: "Most comments"
    }
  ]
}) }}