Skip to main content

This is an internal development app.

To learn how to design and build digital services, visit the design system in the NHS digital service manual for guidance and examples.

Input

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

Input default

Open this example in a new tab: Input default

Code

Markup

<div class="nhsuk-form-group">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--l" for="example">
      What is your full name?
    </label>
  </h1>
  <input class="nhsuk-input" id="example" name="example" type="text">
</div>

Macro

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

{{ input({
  label: {
    text: "What is your full name?",
    size: "l",
    isPageHeading: true
  },
  name: "example"
}) }}

Input with size S label

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

Code

Markup

<div class="nhsuk-form-group">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--s" for="custom-size">
      What is your NHS number?
    </label>
  </h1>
  <input class="nhsuk-input nhsuk-input--code nhsuk-input--width-10" id="custom-size" name="example" type="text" spellcheck="false" inputmode="numeric">
</div>

Macro

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

{{ input({
  label: {
    text: "What is your NHS number?",
    size: "s",
    isPageHeading: true
  },
  id: "custom-size",
  name: "example",
  width: 10,
  code: true,
  inputmode: "numeric",
  spellcheck: false
}) }}

Input with size M label

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

Code

Markup

<div class="nhsuk-form-group">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--m" for="custom-size">
      What is your NHS number?
    </label>
  </h1>
  <input class="nhsuk-input nhsuk-input--code nhsuk-input--width-10" id="custom-size" name="example" type="text" spellcheck="false" inputmode="numeric">
</div>

Macro

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

{{ input({
  label: {
    text: "What is your NHS number?",
    size: "m",
    isPageHeading: true
  },
  id: "custom-size",
  name: "example",
  width: 10,
  code: true,
  inputmode: "numeric",
  spellcheck: false
}) }}

Input with size L label

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

Code

Markup

<div class="nhsuk-form-group">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--l" for="custom-size">
      What is your NHS number?
    </label>
  </h1>
  <input class="nhsuk-input nhsuk-input--code nhsuk-input--width-10" id="custom-size" name="example" type="text" spellcheck="false" inputmode="numeric">
</div>

Macro

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

{{ input({
  label: {
    text: "What is your NHS number?",
    size: "l",
    isPageHeading: true
  },
  id: "custom-size",
  name: "example",
  width: 10,
  code: true,
  inputmode: "numeric",
  spellcheck: false
}) }}

Input with size XL label

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

Code

Markup

<div class="nhsuk-form-group">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--xl" for="custom-size">
      What is your NHS number?
    </label>
  </h1>
  <input class="nhsuk-input nhsuk-input--code nhsuk-input--width-10" id="custom-size" name="example" type="text" spellcheck="false" inputmode="numeric">
</div>

Macro

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

{{ input({
  label: {
    text: "What is your NHS number?",
    size: "xl",
    isPageHeading: true
  },
  id: "custom-size",
  name: "example",
  width: 10,
  code: true,
  inputmode: "numeric",
  spellcheck: false
}) }}

Input with 2 character width

Open this example in a new tab: Input with 2 character width

Code

Markup

<div class="nhsuk-form-group">
  <label class="nhsuk-label" for="input-width">
    2 character width
  </label>
  <input class="nhsuk-input nhsuk-input--width-2" id="input-width" name="example" type="text">
</div>

Macro

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

{{ input({
  name: "example",
  id: "input-width",
  label: {
    text: "2 character width"
  },
  width: 2
}) }}

Input with 3 character width

Open this example in a new tab: Input with 3 character width

Code

Markup

<div class="nhsuk-form-group">
  <label class="nhsuk-label" for="input-width">
    3 character width
  </label>
  <input class="nhsuk-input nhsuk-input--width-3" id="input-width" name="example" type="text">
</div>

Macro

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

{{ input({
  name: "example",
  id: "input-width",
  label: {
    text: "3 character width"
  },
  width: 3
}) }}

Input with 4 character width

Open this example in a new tab: Input with 4 character width

Code

Markup

<div class="nhsuk-form-group">
  <label class="nhsuk-label" for="input-width">
    4 character width
  </label>
  <input class="nhsuk-input nhsuk-input--width-4" id="input-width" name="example" type="text">
</div>

Macro

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

{{ input({
  name: "example",
  id: "input-width",
  label: {
    text: "4 character width"
  },
  width: 4
}) }}

Input with 5 character width

Open this example in a new tab: Input with 5 character width

Code

Markup

<div class="nhsuk-form-group">
  <label class="nhsuk-label" for="input-width">
    5 character width
  </label>
  <input class="nhsuk-input nhsuk-input--width-5" id="input-width" name="example" type="text">
</div>

Macro

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

{{ input({
  name: "example",
  id: "input-width",
  label: {
    text: "5 character width"
  },
  width: 5
}) }}

Input with 10 character width

Open this example in a new tab: Input with 10 character width

Code

Markup

<div class="nhsuk-form-group">
  <label class="nhsuk-label" for="input-width">
    10 character width
  </label>
  <input class="nhsuk-input nhsuk-input--width-10" id="input-width" name="example" type="text">
</div>

Macro

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

{{ input({
  name: "example",
  id: "input-width",
  label: {
    text: "10 character width"
  },
  width: 10
}) }}

Input with 20 character width

Open this example in a new tab: Input with 20 character width

Code

Markup

<div class="nhsuk-form-group">
  <label class="nhsuk-label" for="input-width">
    20 character width
  </label>
  <input class="nhsuk-input nhsuk-input--width-20" id="input-width" name="example" type="text">
</div>

Macro

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

{{ input({
  name: "example",
  id: "input-width",
  label: {
    text: "20 character width"
  },
  width: 20
}) }}

Input with 30 character width

Open this example in a new tab: Input with 30 character width

Code

Markup

<div class="nhsuk-form-group">
  <label class="nhsuk-label" for="input-width">
    30 character width
  </label>
  <input class="nhsuk-input nhsuk-input--width-30" id="input-width" name="example" type="text">
</div>

Macro

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

{{ input({
  name: "example",
  id: "input-width",
  label: {
    text: "30 character width"
  },
  width: 30
}) }}

Input width class

Open this example in a new tab: Input width class

Code

Markup

<div class="nhsuk-form-group">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--l" for="input-width">
      What is your NHS number?
    </label>
  </h1>
  <input class="nhsuk-input nhsuk-input--width-10" id="input-width" name="example" type="text">
</div>

Macro

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

{{ input({
  label: {
    text: "What is your NHS number?",
    size: "l",
    isPageHeading: true
  },
  id: "input-width",
  name: "example",
  classes: "nhsuk-input--width-10"
}) }}

Input width class overriding width param

Open this example in a new tab: Input width class overriding width param

Code

Markup

<div class="nhsuk-form-group">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--l" for="input-width">
      What is your NHS number?
    </label>
  </h1>
  <input class="nhsuk-input nhsuk-input--width-10" id="input-width" name="example" type="text">
</div>

Macro

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

{{ input({
  label: {
    text: "What is your NHS number?",
    size: "l",
    isPageHeading: true
  },
  id: "input-width",
  name: "example",
  classes: "nhsuk-input--width-10",
  width: 30
}) }}

Input with autocomplete attribute

Open this example in a new tab: Input with autocomplete attribute

For example, LS1 1AB
Code

Markup

<div class="nhsuk-form-group">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label" for="with-autocomplete-attribute">
      Enter a full postcode in England
    </label>
  </h1>
  <div class="nhsuk-hint" id="with-autocomplete-attribute-hint">
    For example, LS1 1AB
  </div>
  <input class="nhsuk-input" id="with-autocomplete-attribute" name="example" type="text" aria-describedby="with-autocomplete-attribute-hint" autocomplete="postal-code">
</div>

Macro

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

{{ input({
  label: {
    text: "Enter a full postcode in England",
    isPageHeading: true
  },
  hint: {
    text: "For example, LS1 1AB"
  },
  id: "with-autocomplete-attribute",
  name: "example",
  autocomplete: "postal-code"
}) }}

Input with button

Open this example in a new tab: Input with button

Code

Markup

<div class="nhsuk-form-group">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--l" for="with-button">
      What is your NHS number?
    </label>
  </h1>
  <div class="nhsuk-input-wrapper">
    <input class="nhsuk-input nhsuk-input--code nhsuk-input--width-10" id="with-button" name="example" type="text" spellcheck="false" inputmode="numeric">
    <button class="nhsuk-button nhsuk-button--secondary nhsuk-button--small" data-module="nhsuk-button" type="submit">
      Search
    </button>
  </div>
</div>

Macro

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

{{ input({
  label: {
    text: "What is your NHS number?",
    size: "l",
    isPageHeading: true
  },
  id: "with-button",
  name: "example",
  width: 10,
  code: true,
  inputmode: "numeric",
  spellcheck: false,
  formGroup: {
    afterInput: {
      html: '<button class="nhsuk-button nhsuk-button--secondary nhsuk-button--small" data-module="nhsuk-button" type="submit">\n  Search\n</button>\n'
    }
  }
}) }}

Input with button and error message

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

Error: Enter NHS number

Code

Markup

<div class="nhsuk-form-group nhsuk-form-group--error">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--l" for="with-button-error-message">
      What is your NHS number?
    </label>
  </h1>
  <p class="nhsuk-error-message" id="with-button-error-message-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Enter NHS number
  </p>
  <div class="nhsuk-input-wrapper">
    <input class="nhsuk-input nhsuk-input--code nhsuk-input--width-10 nhsuk-input--error" id="with-button-error-message" name="example" type="text" spellcheck="false" aria-describedby="with-button-error-message-error" inputmode="numeric">
    <button class="nhsuk-button nhsuk-button--secondary nhsuk-button--small" data-module="nhsuk-button" type="submit">
      Search
    </button>
  </div>
</div>

Macro

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

{{ input({
  label: {
    text: "What is your NHS number?",
    size: "l",
    isPageHeading: true
  },
  errorMessage: {
    text: "Enter NHS number"
  },
  id: "with-button-error-message",
  name: "example",
  width: 10,
  code: true,
  inputmode: "numeric",
  spellcheck: false,
  formGroup: {
    afterInput: {
      html: '<button class="nhsuk-button nhsuk-button--secondary nhsuk-button--small" data-module="nhsuk-button" type="submit">\n  Search\n</button>\n'
    }
  }
}) }}

Input with code input styling

Open this example in a new tab: Input with code input styling

This is a 10 digit number (like 999 123 4567) that you can find on an NHS letter, prescription or in the NHS App
Code

Markup

<div class="nhsuk-form-group">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--l" for="with-code-input-styling">
      What is your NHS number?
    </label>
  </h1>
  <div class="nhsuk-hint" id="with-code-input-styling-hint">
    This is a 10 digit number (like <span class="nhsuk-u-nowrap">999 123 4567</span>) that you can find on an NHS letter, prescription or in the NHS App
  </div>
  <input class="nhsuk-input nhsuk-input--code nhsuk-input--width-10" id="with-code-input-styling" name="example" type="text" spellcheck="false" value="999 123 4567" aria-describedby="with-code-input-styling-hint" inputmode="numeric">
</div>

Macro

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

{{ input({
  label: {
    text: "What is your NHS number?",
    size: "l",
    isPageHeading: true
  },
  hint: {
    html: 'This is a 10 digit number (like <span class="nhsuk-u-nowrap">999 123 4567</span>) that you can find on an NHS letter, prescription or in the NHS App'
  },
  id: "with-code-input-styling",
  name: "example",
  width: 10,
  code: true,
  value: "999 123 4567",
  inputmode: "numeric",
  spellcheck: false
}) }}

Input with error message

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

Error: Enter NHS number

Code

Markup

<div class="nhsuk-form-group nhsuk-form-group--error">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--l" for="with-error-message">
      What is your NHS number?
    </label>
  </h1>
  <p class="nhsuk-error-message" id="with-error-message-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Enter NHS number
  </p>
  <input class="nhsuk-input nhsuk-input--code nhsuk-input--width-10 nhsuk-input--error" id="with-error-message" name="example" type="text" spellcheck="false" aria-describedby="with-error-message-error" inputmode="numeric">
</div>

Macro

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

{{ input({
  label: {
    text: "What is your NHS number?",
    size: "l",
    isPageHeading: true
  },
  errorMessage: {
    text: "Enter NHS number"
  },
  id: "with-error-message",
  name: "example",
  width: 10,
  code: true,
  inputmode: "numeric",
  spellcheck: false
}) }}

Input with hint

Open this example in a new tab: Input with hint

This is a 10 digit number (like 999 123 4567) that you can find on an NHS letter, prescription or in the NHS App
Code

Markup

<div class="nhsuk-form-group">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--l" for="with-hint">
      What is your NHS number?
    </label>
  </h1>
  <div class="nhsuk-hint" id="with-hint-hint">
    This is a 10 digit number (like <span class="nhsuk-u-nowrap">999 123 4567</span>) that you can find on an NHS letter, prescription or in the NHS App
  </div>
  <input class="nhsuk-input nhsuk-input--code nhsuk-input--width-10" id="with-hint" name="example" type="text" spellcheck="false" aria-describedby="with-hint-hint" inputmode="numeric">
</div>

Macro

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

{{ input({
  label: {
    text: "What is your NHS number?",
    size: "l",
    isPageHeading: true
  },
  hint: {
    html: 'This is a 10 digit number (like <span class="nhsuk-u-nowrap">999 123 4567</span>) that you can find on an NHS letter, prescription or in the NHS App'
  },
  id: "with-hint",
  name: "example",
  width: 10,
  code: true,
  inputmode: "numeric",
  spellcheck: false
}) }}

Input with hint and error

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

This is a 10 digit number (like 999 123 4567) that you can find on an NHS letter, prescription or in the NHS App

Error: Enter NHS number

Code

Markup

<div class="nhsuk-form-group nhsuk-form-group--error">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--l" for="with-hint-error">
      What is your NHS number?
    </label>
  </h1>
  <div class="nhsuk-hint" id="with-hint-error-hint">
    This is a 10 digit number (like <span class="nhsuk-u-nowrap">999 123 4567</span>) that you can find on an NHS letter, prescription or in the NHS App
  </div>
  <p class="nhsuk-error-message" id="with-hint-error-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Enter NHS number
  </p>
  <input class="nhsuk-input nhsuk-input--code nhsuk-input--width-10 nhsuk-input--error" id="with-hint-error" name="example" type="text" spellcheck="false" aria-describedby="with-hint-error-hint with-hint-error-error" inputmode="numeric">
</div>

Macro

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

{{ input({
  label: {
    text: "What is your NHS number?",
    size: "l",
    isPageHeading: true
  },
  hint: {
    html: 'This is a 10 digit number (like <span class="nhsuk-u-nowrap">999 123 4567</span>) that you can find on an NHS letter, prescription or in the NHS App'
  },
  errorMessage: {
    text: "Enter NHS number"
  },
  id: "with-hint-error",
  name: "example",
  width: 10,
  code: true,
  inputmode: "numeric",
  spellcheck: false
}) }}

Input without page heading

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

Code

Markup

<div class="nhsuk-form-group">
  <label class="nhsuk-label" for="without-heading">
    What is your NHS number?
  </label>
  <input class="nhsuk-input nhsuk-input--code nhsuk-input--width-10" id="without-heading" name="example" type="text" spellcheck="false" inputmode="numeric">
</div>

Macro

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

{{ input({
  label: {
    text: "What is your NHS number?"
  },
  id: "without-heading",
  name: "example",
  width: 10,
  code: true,
  inputmode: "numeric",
  spellcheck: false
}) }}

Input with prefix

Open this example in a new tab: Input with prefix

Code

Markup

<div class="nhsuk-form-group">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label" for="with-prefix">
      Cost in pounds
    </label>
  </h1>
  <div class="nhsuk-input-wrapper">
    <div class="nhsuk-input-wrapper__prefix" aria-hidden="true">£</div>
    <input class="nhsuk-input nhsuk-input--width-5" id="with-prefix" name="example" type="text">
  </div>
</div>

Macro

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

{{ input({
  label: {
    text: "Cost in pounds",
    isPageHeading: true
  },
  id: "with-prefix",
  name: "example",
  prefix: {
    text: "£"
  },
  width: 5
}) }}

Input with prefix and suffix

Open this example in a new tab: Input with prefix and suffix

Code

Markup

<div class="nhsuk-form-group">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label" for="with-prefix-suffix">
      Cost per item, in pounds
    </label>
  </h1>
  <div class="nhsuk-input-wrapper">
    <div class="nhsuk-input-wrapper__prefix" aria-hidden="true">£</div>
    <input class="nhsuk-input nhsuk-input--width-5" id="with-prefix-suffix" name="example" type="text">
    <div class="nhsuk-input-wrapper__suffix" aria-hidden="true">per item</div>
  </div>
</div>

Macro

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

{{ input({
  label: {
    text: "Cost per item, in pounds",
    isPageHeading: true
  },
  id: "with-prefix-suffix",
  name: "example",
  prefix: {
    text: "£"
  },
  suffix: {
    text: "per item"
  },
  width: 5
}) }}

Input with prefix and suffix and error

Open this example in a new tab: Input with prefix and suffix and error

Error: Enter a cost per item, in pounds

Code

Markup

<div class="nhsuk-form-group nhsuk-form-group--error">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label" for="with-prefix-suffix">
      Cost per item, in pounds
    </label>
  </h1>
  <p class="nhsuk-error-message" id="with-prefix-suffix-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Enter a cost per item, in pounds
  </p>
  <div class="nhsuk-input-wrapper">
    <div class="nhsuk-input-wrapper__prefix" aria-hidden="true">£</div>
    <input class="nhsuk-input nhsuk-input--width-5 nhsuk-input--error" id="with-prefix-suffix" name="example" type="text" aria-describedby="with-prefix-suffix-error">
    <div class="nhsuk-input-wrapper__suffix" aria-hidden="true">per item</div>
  </div>
</div>

Macro

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

{{ input({
  label: {
    text: "Cost per item, in pounds",
    isPageHeading: true
  },
  errorMessage: {
    text: "Enter a cost per item, in pounds"
  },
  id: "with-prefix-suffix",
  name: "example",
  prefix: {
    text: "£"
  },
  suffix: {
    text: "per item"
  },
  width: 5
}) }}

Input with prefix HTML

Open this example in a new tab: Input with prefix HTML

Code

Markup

<div class="nhsuk-form-group">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label" for="with-prefix">
      Cost in pounds
    </label>
  </h1>
  <div class="nhsuk-input-wrapper">
    <div class="nhsuk-input-wrapper__prefix" aria-hidden="true"><span>£</span></div>
    <input class="nhsuk-input nhsuk-input--width-5" id="with-prefix" name="example" type="text">
  </div>
</div>

Macro

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

{{ input({
  label: {
    text: "Cost in pounds",
    isPageHeading: true
  },
  id: "with-prefix",
  name: "example",
  prefix: {
    html: "<span>£</span>"
  },
  width: 5
}) }}

Input with suffix

Open this example in a new tab: Input with suffix

Code

Markup

<div class="nhsuk-form-group">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label" for="with-suffix">
      Weight in kilograms
    </label>
  </h1>
  <div class="nhsuk-input-wrapper">
    <input class="nhsuk-input nhsuk-input--width-5" id="with-suffix" name="example" type="text">
    <div class="nhsuk-input-wrapper__suffix" aria-hidden="true">kg</div>
  </div>
</div>

Macro

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

{{ input({
  label: {
    text: "Weight in kilograms",
    isPageHeading: true
  },
  id: "with-suffix",
  name: "example",
  suffix: {
    text: "kg"
  },
  width: 5
}) }}

Input with suffix HTML

Open this example in a new tab: Input with suffix HTML

Code

Markup

<div class="nhsuk-form-group">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label" for="with-suffix">
      Weight in kilograms
    </label>
  </h1>
  <div class="nhsuk-input-wrapper">
    <input class="nhsuk-input nhsuk-input--width-5" id="with-suffix" name="example" type="text">
    <div class="nhsuk-input-wrapper__suffix" aria-hidden="true"><span>kg</span></div>
  </div>
</div>

Macro

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

{{ input({
  label: {
    text: "Weight in kilograms",
    isPageHeading: true
  },
  id: "with-suffix",
  name: "example",
  suffix: {
    html: "<span>kg</span>"
  },
  width: 5
}) }}