Skip to main content

Internal review app NHS.UK frontend

Use design system guidance and examples to build consistent, accessible NHS services for the public and staff.

Deployed automatically from main branch (opens in new tab).

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: {
    heading: "What is your full name?",
    size: "l"
  },
  name: "example"
}) }}

Input disabled

Open this example in a new tab: Input disabled

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" disabled>
</div>

Macro

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

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

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: {
    heading: "What is your NHS number?",
    size: "s"
  },
  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: {
    heading: "What is your NHS number?",
    size: "m"
  },
  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: {
    heading: "What is your NHS number?",
    size: "l"
  },
  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: {
    heading: "What is your NHS number?",
    size: "xl"
  },
  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: {
    heading: "What is your NHS number?",
    size: "l"
  },
  id: "input-width",
  name: "example",
  classes: "nhsuk-input--width-10"
}) }}

Input width class overriding width option

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

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: {
    heading: "What is your NHS number?",
    size: "l"
  },
  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: {
    heading: "Enter a full postcode in England"
  },
  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: {
    heading: "What is your NHS number?",
    size: "l"
  },
  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--error nhsuk-input--width-10" 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: {
    heading: "What is your NHS number?",
    size: "l"
  },
  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: {
    heading: "What is your NHS number?",
    size: "l"
  },
  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--error nhsuk-input--width-10" 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: {
    heading: "What is your NHS number?",
    size: "l"
  },
  errorMessage: {
    text: "Enter NHS number"
  },
  id: "with-error-message",
  name: "example",
  width: 10,
  code: true,
  inputmode: "numeric",
  spellcheck: false
}) }}

Input with error message and hint

Open this example in a new tab: Input with error message and 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

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--error nhsuk-input--width-10" 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: {
    heading: "What is your NHS number?",
    size: "l"
  },
  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 with error message and hint as strings

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

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 999 123 4567) 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--error nhsuk-input--width-10" 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: {
    heading: "What is your NHS number?",
    size: "l"
  },
  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",
  errorMessage: "Enter NHS number",
  id: "with-hint-error",
  name: "example",
  width: 10,
  code: true,
  inputmode: "numeric",
  spellcheck: false
}) }}

Input with error message and hint, without heading

Open this example in a new tab: Input with error message and hint, without heading

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">
  <label class="nhsuk-label" for="with-hint-error">
    What is your NHS number?
  </label>
  <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--error nhsuk-input--width-10" 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?"
  },
  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 with error message, without heading

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

Error: Enter NHS number

Code

Markup

<div class="nhsuk-form-group nhsuk-form-group--error">
  <label class="nhsuk-label" for="with-error-message">
    What is your NHS number?
  </label>
  <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--error nhsuk-input--width-10" 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?"
  },
  errorMessage: {
    text: "Enter NHS number"
  },
  id: "with-error-message",
  name: "example",
  width: 10,
  code: true,
  inputmode: "numeric",
  spellcheck: false
}) }}

Input with error only

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

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-only">
      What is your NHS number?
    </label>
  </h1>
  <input class="nhsuk-input nhsuk-input--code nhsuk-input--error nhsuk-input--width-10" id="with-error-only" name="example" type="text" spellcheck="false" inputmode="numeric">
</div>

Macro

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

{{ input({
  label: {
    heading: "What is your NHS number?",
    size: "l"
  },
  errorMessage: true,
  id: "with-error-only",
  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: {
    heading: "What is your NHS number?",
    size: "l"
  },
  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 without heading

Open this example in a new tab: Input without 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: "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: {
    heading: "Cost in pounds"
  },
  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: {
    heading: "Cost per item, in pounds"
  },
  id: "with-prefix-suffix",
  name: "example",
  prefix: {
    text: "£"
  },
  suffix: {
    text: "per item"
  },
  width: 5
}) }}

Input with prefix and suffix and error message

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

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--error nhsuk-input--width-5" 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: {
    heading: "Cost per item, in pounds"
  },
  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 as string

Open this example in a new tab: Input with prefix as string

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: {
    heading: "Cost in pounds"
  },
  id: "with-prefix",
  name: "example",
  prefix: "£",
  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: {
    heading: "Cost in pounds"
  },
  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: {
    heading: "Weight in kilograms"
  },
  id: "with-suffix",
  name: "example",
  suffix: {
    text: "kg"
  },
  width: 5
}) }}

Input with suffix as string

Open this example in a new tab: Input with suffix as string

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"></div>
  </div>
</div>

Macro

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

{{ input({
  label: {
    heading: "Weight in kilograms"
  },
  id: "with-suffix",
  name: "example",
  suffix: "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: {
    heading: "Weight in kilograms"
  },
  id: "with-suffix",
  name: "example",
  suffix: {
    html: "<span>kg</span>"
  },
  width: 5
}) }}