Skip to main content

Form elements – Text input

Use text input to let users enter a single line of text.

Open this example in a new tab: text input 
<div class="nhsuk-form-group">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--l" for="full-name">
      What is your full name?
    </label>
  </h1>
  <input class="nhsuk-input" id="full-name" name="fullName" type="text">
</div>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work. These are marked as "Required" in the option description. Deprecated options are marked as "Deprecated".

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
id string The ID of the input. Defaults to the value of name.
name string Required. The name of the input, which is submitted with the form data.
type string Type of input control, for example, an email input control. Defaults to "text".
inputmode string Optional value for the inputmode attribute.
value string Optional initial value of the input.
disabled boolean If true, input will be disabled.
describedBy string One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
label object Required. The label used by the text input component. See macro options for label.
hint object Can be used to add a hint to a text input component. See macro options for hint.
errorMessage object Can be used to add an error message to the text input component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. See macro options for errorMessage.
prefix object Can be used to add a prefix to the text input component. See macro options for prefix.
suffix object Can be used to add a suffix to the text input component. See macro options for suffix.
code boolean If set to true, use a monospace font for codes or sequences.
width integer Optional fixed width for the text input component – 2, 3, 4, 5, 10, 20 or 30.
formGroup object Additional options for the form group containing the text input component. See macro options for formGroup.
classes string Classes to add to the input.
autocomplete string Attribute to meet WCAG success criterion 1.3.5: Identify input purpose, for instance "bday-day". See the Autofill section in the HTML standard for a full list of attributes that can be used.
pattern string Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
placeholder string Attribute to provide placeholder text for the input.
spellcheck boolean Optional field to enable or disable the spellcheck attribute on the input.
autocapitalize string Optional field to enable or disable autocapitalisation of user input. See the Autocapitalization section in the HTML standard for a full list of values that can be used.
inputWrapper object If any of prefix, suffix, formGroup.beforeInput or formGroup.afterInput have a value, a wrapping element is added around the input and inserted content. This object allows you to customise that wrapping element. See macro options for inputWrapper.
attributes object HTML attributes (for example data attributes) to add to the input.
Options for prefix object
Name Type Description
text string Required. Required. If html is set, this is not required. Text to use within the prefix. If html is provided, the text option will be ignored.
html string Required. Required. If text is set, this is not required. HTML to use within the prefix. If html is provided, the text option will be ignored.
classes string Classes to add to the prefix.
attributes object HTML attributes (for example data attributes) to add to the prefix element.
Options for suffix object
Name Type Description
text string Required. If html is set, this is not required. Text to use within the suffix. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within the suffix. If html is provided, the text option will be ignored.
classes string Classes to add to the suffix element.
attributes object HTML attributes (for example data attributes) to add to the suffix element.
Options for formGroup object
Name Type Description
classes string Classes to add to the form group (for example to show error state for the whole group).
attributes object HTML attributes (for example data attributes) to add to the form group.
beforeInput object Content to add before the input used by the text input component. See macro options for formGroup beforeInput.
afterInput object Content to add after the input used by the text input component. See macro options for formGroup afterInput.
Options for formGroup beforeInput object
Name Type Description
text string Required. Text to add before the input. If html is provided, the text option will be ignored.
html string Required. HTML to add before the input. If html is provided, the text option will be ignored.
Options for formGroup afterInput object
Name Type Description
text string Required. Text to add after the input. If html is provided, the text option will be ignored.
html string Required. HTML to add after the input. If html is provided, the text option will be ignored.
Options for inputWrapper object
Name Type Description
classes string Classes to add to the wrapping element.
attributes object HTML attributes (for example data attributes) to add to the wrapping element.
Options for label component
Name Type Description
id string The ID of the label.
text string Required. If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored.
caller nunjucks-block Not strictly a parameter but Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire label component in a call block.
for string The value of the for attribute, the ID of the input the label is associated with.
isPageHeading boolean Whether the label also acts as the heading for the page.
size string Size of the label – "s", "m", "l" or "xl".
classes string Classes to add to the label tag.
attributes object HTML attributes (for example data attributes) to add to the label tag. 
{% from "input/macro.njk" import input %}

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

When to use the text input component

Use the text input component when you need users to enter text that's no longer than a single line, such as their name or phone number.

When not to use the text input component

Do not use this component if you need users to enter longer answers that might span several lines. In this case, use the textarea component.

How to use the text input component

Give the text input a label

Give it a visible label. Do not use placeholder text for a label as it vanishes when users click on the text input.

Align labels above the text inputs they refer to. Labels should be short, direct and written in sentence case. Do not use colons at the end of labels.

If you're asking 1 question on the page

If you are asking just 1 question per page as we recommend, you can set the contents of the <label> as the page heading. This is good practice as it means that screen reader users will only hear the contents once.

Read more about how to make labels and legends headings on the GOV.UK Design System.

Open this example in a new tab: text input second 
<div class="nhsuk-form-group">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--l" for="full-name">
      What is your full name?
    </label>
  </h1>
  <input class="nhsuk-input" id="full-name" name="fullName" type="text">
</div>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work. These are marked as "Required" in the option description. Deprecated options are marked as "Deprecated".

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
id string The ID of the input. Defaults to the value of name.
name string Required. The name of the input, which is submitted with the form data.
type string Type of input control, for example, an email input control. Defaults to "text".
inputmode string Optional value for the inputmode attribute.
value string Optional initial value of the input.
disabled boolean If true, input will be disabled.
describedBy string One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
label object Required. The label used by the text input component. See macro options for label.
hint object Can be used to add a hint to a text input component. See macro options for hint.
errorMessage object Can be used to add an error message to the text input component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. See macro options for errorMessage.
prefix object Can be used to add a prefix to the text input component. See macro options for prefix.
suffix object Can be used to add a suffix to the text input component. See macro options for suffix.
code boolean If set to true, use a monospace font for codes or sequences.
width integer Optional fixed width for the text input component – 2, 3, 4, 5, 10, 20 or 30.
formGroup object Additional options for the form group containing the text input component. See macro options for formGroup.
classes string Classes to add to the input.
autocomplete string Attribute to meet WCAG success criterion 1.3.5: Identify input purpose, for instance "bday-day". See the Autofill section in the HTML standard for a full list of attributes that can be used.
pattern string Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
placeholder string Attribute to provide placeholder text for the input.
spellcheck boolean Optional field to enable or disable the spellcheck attribute on the input.
autocapitalize string Optional field to enable or disable autocapitalisation of user input. See the Autocapitalization section in the HTML standard for a full list of values that can be used.
inputWrapper object If any of prefix, suffix, formGroup.beforeInput or formGroup.afterInput have a value, a wrapping element is added around the input and inserted content. This object allows you to customise that wrapping element. See macro options for inputWrapper.
attributes object HTML attributes (for example data attributes) to add to the input.
Options for prefix object
Name Type Description
text string Required. Required. If html is set, this is not required. Text to use within the prefix. If html is provided, the text option will be ignored.
html string Required. Required. If text is set, this is not required. HTML to use within the prefix. If html is provided, the text option will be ignored.
classes string Classes to add to the prefix.
attributes object HTML attributes (for example data attributes) to add to the prefix element.
Options for suffix object
Name Type Description
text string Required. If html is set, this is not required. Text to use within the suffix. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within the suffix. If html is provided, the text option will be ignored.
classes string Classes to add to the suffix element.
attributes object HTML attributes (for example data attributes) to add to the suffix element.
Options for formGroup object
Name Type Description
classes string Classes to add to the form group (for example to show error state for the whole group).
attributes object HTML attributes (for example data attributes) to add to the form group.
beforeInput object Content to add before the input used by the text input component. See macro options for formGroup beforeInput.
afterInput object Content to add after the input used by the text input component. See macro options for formGroup afterInput.
Options for formGroup beforeInput object
Name Type Description
text string Required. Text to add before the input. If html is provided, the text option will be ignored.
html string Required. HTML to add before the input. If html is provided, the text option will be ignored.
Options for formGroup afterInput object
Name Type Description
text string Required. Text to add after the input. If html is provided, the text option will be ignored.
html string Required. HTML to add after the input. If html is provided, the text option will be ignored.
Options for inputWrapper object
Name Type Description
classes string Classes to add to the wrapping element.
attributes object HTML attributes (for example data attributes) to add to the wrapping element.
Options for label component
Name Type Description
id string The ID of the label.
text string Required. If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored.
caller nunjucks-block Not strictly a parameter but Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire label component in a call block.
for string The value of the for attribute, the ID of the input the label is associated with.
isPageHeading boolean Whether the label also acts as the heading for the page.
size string Size of the label – "s", "m", "l" or "xl".
classes string Classes to add to the label tag.
attributes object HTML attributes (for example data attributes) to add to the label tag. 
{% from "input/macro.njk" import input %}

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

If you're asking more than 1 question on the page

If you're asking more than 1 question on the page, do not set the contents of the <label> as the page heading. Read more about asking multiple questions on question pages.

Open this example in a new tab: text input without heading 
<div class="nhsuk-form-group">
  <label class="nhsuk-label" for="full-name">
    What is your full name?
  </label>
  <input class="nhsuk-input" id="full-name" name="fullName" type="text">
</div>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work. These are marked as "Required" in the option description. Deprecated options are marked as "Deprecated".

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
id string The ID of the input. Defaults to the value of name.
name string Required. The name of the input, which is submitted with the form data.
type string Type of input control, for example, an email input control. Defaults to "text".
inputmode string Optional value for the inputmode attribute.
value string Optional initial value of the input.
disabled boolean If true, input will be disabled.
describedBy string One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
label object Required. The label used by the text input component. See macro options for label.
hint object Can be used to add a hint to a text input component. See macro options for hint.
errorMessage object Can be used to add an error message to the text input component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. See macro options for errorMessage.
prefix object Can be used to add a prefix to the text input component. See macro options for prefix.
suffix object Can be used to add a suffix to the text input component. See macro options for suffix.
code boolean If set to true, use a monospace font for codes or sequences.
width integer Optional fixed width for the text input component – 2, 3, 4, 5, 10, 20 or 30.
formGroup object Additional options for the form group containing the text input component. See macro options for formGroup.
classes string Classes to add to the input.
autocomplete string Attribute to meet WCAG success criterion 1.3.5: Identify input purpose, for instance "bday-day". See the Autofill section in the HTML standard for a full list of attributes that can be used.
pattern string Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
placeholder string Attribute to provide placeholder text for the input.
spellcheck boolean Optional field to enable or disable the spellcheck attribute on the input.
autocapitalize string Optional field to enable or disable autocapitalisation of user input. See the Autocapitalization section in the HTML standard for a full list of values that can be used.
inputWrapper object If any of prefix, suffix, formGroup.beforeInput or formGroup.afterInput have a value, a wrapping element is added around the input and inserted content. This object allows you to customise that wrapping element. See macro options for inputWrapper.
attributes object HTML attributes (for example data attributes) to add to the input.
Options for prefix object
Name Type Description
text string Required. Required. If html is set, this is not required. Text to use within the prefix. If html is provided, the text option will be ignored.
html string Required. Required. If text is set, this is not required. HTML to use within the prefix. If html is provided, the text option will be ignored.
classes string Classes to add to the prefix.
attributes object HTML attributes (for example data attributes) to add to the prefix element.
Options for suffix object
Name Type Description
text string Required. If html is set, this is not required. Text to use within the suffix. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within the suffix. If html is provided, the text option will be ignored.
classes string Classes to add to the suffix element.
attributes object HTML attributes (for example data attributes) to add to the suffix element.
Options for formGroup object
Name Type Description
classes string Classes to add to the form group (for example to show error state for the whole group).
attributes object HTML attributes (for example data attributes) to add to the form group.
beforeInput object Content to add before the input used by the text input component. See macro options for formGroup beforeInput.
afterInput object Content to add after the input used by the text input component. See macro options for formGroup afterInput.
Options for formGroup beforeInput object
Name Type Description
text string Required. Text to add before the input. If html is provided, the text option will be ignored.
html string Required. HTML to add before the input. If html is provided, the text option will be ignored.
Options for formGroup afterInput object
Name Type Description
text string Required. Text to add after the input. If html is provided, the text option will be ignored.
html string Required. HTML to add after the input. If html is provided, the text option will be ignored.
Options for inputWrapper object
Name Type Description
classes string Classes to add to the wrapping element.
attributes object HTML attributes (for example data attributes) to add to the wrapping element.
Options for label component
Name Type Description
id string The ID of the label.
text string Required. If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored.
caller nunjucks-block Not strictly a parameter but Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire label component in a call block.
for string The value of the for attribute, the ID of the input the label is associated with.
isPageHeading boolean Whether the label also acts as the heading for the page.
size string Size of the label – "s", "m", "l" or "xl".
classes string Classes to add to the label tag.
attributes object HTML attributes (for example data attributes) to add to the label tag. 
{% from "input/macro.njk" import input %}

{{ input({
  id: "full-name",
  name: "fullName",
  label: {
    text: "What is your full name?"
  }
}) }}

Make text inputs the right size

Help users understand what they should enter by making text inputs the right size for the information you want them to give you.

By default, the width of text inputs is fluid and will fit the full width of the container they are placed into.

If you want to make the input smaller, you can either use a fixed width input, or use the width override classes to create a smaller, fluid width input.

Fixed width inputs

Use fixed width inputs for content that has a specific, known length. For example, postcode inputs should be postcode-sized and phone number inputs should be phone number-sized.

On fixed width inputs, the width will remain fixed on all screens unless it is wider than the viewport, in which case it will shrink to fit.

Open this example in a new tab: text input fixed width 
<div class="nhsuk-form-group">
  <label class="nhsuk-label" for="input-width-20">
    20 character width
  </label>
  <input class="nhsuk-input nhsuk-input--width-20" id="input-width-20" name="inputWidth20" type="text">
</div>

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

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

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

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

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

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work. These are marked as "Required" in the option description. Deprecated options are marked as "Deprecated".

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
id string The ID of the input. Defaults to the value of name.
name string Required. The name of the input, which is submitted with the form data.
type string Type of input control, for example, an email input control. Defaults to "text".
inputmode string Optional value for the inputmode attribute.
value string Optional initial value of the input.
disabled boolean If true, input will be disabled.
describedBy string One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
label object Required. The label used by the text input component. See macro options for label.
hint object Can be used to add a hint to a text input component. See macro options for hint.
errorMessage object Can be used to add an error message to the text input component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. See macro options for errorMessage.
prefix object Can be used to add a prefix to the text input component. See macro options for prefix.
suffix object Can be used to add a suffix to the text input component. See macro options for suffix.
code boolean If set to true, use a monospace font for codes or sequences.
width integer Optional fixed width for the text input component – 2, 3, 4, 5, 10, 20 or 30.
formGroup object Additional options for the form group containing the text input component. See macro options for formGroup.
classes string Classes to add to the input.
autocomplete string Attribute to meet WCAG success criterion 1.3.5: Identify input purpose, for instance "bday-day". See the Autofill section in the HTML standard for a full list of attributes that can be used.
pattern string Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
placeholder string Attribute to provide placeholder text for the input.
spellcheck boolean Optional field to enable or disable the spellcheck attribute on the input.
autocapitalize string Optional field to enable or disable autocapitalisation of user input. See the Autocapitalization section in the HTML standard for a full list of values that can be used.
inputWrapper object If any of prefix, suffix, formGroup.beforeInput or formGroup.afterInput have a value, a wrapping element is added around the input and inserted content. This object allows you to customise that wrapping element. See macro options for inputWrapper.
attributes object HTML attributes (for example data attributes) to add to the input.
Options for prefix object
Name Type Description
text string Required. Required. If html is set, this is not required. Text to use within the prefix. If html is provided, the text option will be ignored.
html string Required. Required. If text is set, this is not required. HTML to use within the prefix. If html is provided, the text option will be ignored.
classes string Classes to add to the prefix.
attributes object HTML attributes (for example data attributes) to add to the prefix element.
Options for suffix object
Name Type Description
text string Required. If html is set, this is not required. Text to use within the suffix. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within the suffix. If html is provided, the text option will be ignored.
classes string Classes to add to the suffix element.
attributes object HTML attributes (for example data attributes) to add to the suffix element.
Options for formGroup object
Name Type Description
classes string Classes to add to the form group (for example to show error state for the whole group).
attributes object HTML attributes (for example data attributes) to add to the form group.
beforeInput object Content to add before the input used by the text input component. See macro options for formGroup beforeInput.
afterInput object Content to add after the input used by the text input component. See macro options for formGroup afterInput.
Options for formGroup beforeInput object
Name Type Description
text string Required. Text to add before the input. If html is provided, the text option will be ignored.
html string Required. HTML to add before the input. If html is provided, the text option will be ignored.
Options for formGroup afterInput object
Name Type Description
text string Required. Text to add after the input. If html is provided, the text option will be ignored.
html string Required. HTML to add after the input. If html is provided, the text option will be ignored.
Options for inputWrapper object
Name Type Description
classes string Classes to add to the wrapping element.
attributes object HTML attributes (for example data attributes) to add to the wrapping element.
Options for label component
Name Type Description
id string The ID of the label.
text string Required. If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored.
caller nunjucks-block Not strictly a parameter but Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire label component in a call block.
for string The value of the for attribute, the ID of the input the label is associated with.
isPageHeading boolean Whether the label also acts as the heading for the page.
size string Size of the label – "s", "m", "l" or "xl".
classes string Classes to add to the label tag.
attributes object HTML attributes (for example data attributes) to add to the label tag. 
{% from "input/macro.njk" import input %}

{{ input({
  label: {
  text: "20 character width"
  },
  id: "input-width-20",
  name: "inputWidth20",
  classes: "nhsuk-input--width-20"
}) }}
{{ input({
  label: {
  text: "10 character width"
  },
  id: "input-width-10",
  name: "inputWidth10",
  classes: "nhsuk-input--width-10"
}) }}
{{ input({
  label: {
  text: "5 character width"
  },
  id: "input-width-5",
  name: "inputWidth5",
  classes: "nhsuk-input--width-5"
}) }}
{{ input({
  label: {
  text: "4 character width"
  },
  id: "input-width-4",
  name: "inputWidth4",
  classes: "nhsuk-input--width-4"
}) }}
{{ input({
  label: {
  text: "3 character width"
  },
  id: "input-width-3",
  name: "inputWidth3",
  classes: "nhsuk-input--width-3"
}) }}
{{ input({
  label: {
  text: "2 character width"
  },
  id: "input-width-2",
  name: "inputWidth2",
  classes: "nhsuk-input--width-2"
}) }}

Fluid width inputs

Use the width override classes to reduce the width of an input in relation to its parent container, for example, to two-thirds.

Fluid width inputs will resize with the viewport.

Open this example in a new tab: text input fluid width 
<div class="nhsuk-form-group">
  <label class="nhsuk-label" for="full">
    Full width
  </label>
  <input class="nhsuk-input nhsuk-u-width-full" id="full" name="full" type="text">
</div>

<div class="nhsuk-form-group">
  <label class="nhsuk-label" for="three-quarters">
    Three-quarters width
  </label>
  <input class="nhsuk-input nhsuk-u-width-three-quarters" id="three-quarters" name="threeQuarters" type="text">
</div>

<div class="nhsuk-form-group">
  <label class="nhsuk-label" for="two-thirds">
    Two-thirds width
  </label>
  <input class="nhsuk-input nhsuk-u-width-two-thirds" id="two-thirds" name="twoThirds" type="text">
</div>

<div class="nhsuk-form-group">
  <label class="nhsuk-label" for="one-half">
    One-half width
  </label>
  <input class="nhsuk-input nhsuk-u-width-one-half" id="one-half" name="oneHalf" type="text">
</div>

<div class="nhsuk-form-group">
  <label class="nhsuk-label" for="one-third">
    One-third width
  </label>
  <input class="nhsuk-input nhsuk-u-width-one-third" id="one-third" name="oneThird" type="text">
</div>

<div class="nhsuk-form-group">
  <label class="nhsuk-label" for="one-quarter">
    One-quarter width
  </label>
  <input class="nhsuk-input nhsuk-u-width-one-quarter" id="one-quarter" name="oneQuarter" type="text">
</div>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work. These are marked as "Required" in the option description. Deprecated options are marked as "Deprecated".

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
id string The ID of the input. Defaults to the value of name.
name string Required. The name of the input, which is submitted with the form data.
type string Type of input control, for example, an email input control. Defaults to "text".
inputmode string Optional value for the inputmode attribute.
value string Optional initial value of the input.
disabled boolean If true, input will be disabled.
describedBy string One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
label object Required. The label used by the text input component. See macro options for label.
hint object Can be used to add a hint to a text input component. See macro options for hint.
errorMessage object Can be used to add an error message to the text input component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. See macro options for errorMessage.
prefix object Can be used to add a prefix to the text input component. See macro options for prefix.
suffix object Can be used to add a suffix to the text input component. See macro options for suffix.
code boolean If set to true, use a monospace font for codes or sequences.
width integer Optional fixed width for the text input component – 2, 3, 4, 5, 10, 20 or 30.
formGroup object Additional options for the form group containing the text input component. See macro options for formGroup.
classes string Classes to add to the input.
autocomplete string Attribute to meet WCAG success criterion 1.3.5: Identify input purpose, for instance "bday-day". See the Autofill section in the HTML standard for a full list of attributes that can be used.
pattern string Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
placeholder string Attribute to provide placeholder text for the input.
spellcheck boolean Optional field to enable or disable the spellcheck attribute on the input.
autocapitalize string Optional field to enable or disable autocapitalisation of user input. See the Autocapitalization section in the HTML standard for a full list of values that can be used.
inputWrapper object If any of prefix, suffix, formGroup.beforeInput or formGroup.afterInput have a value, a wrapping element is added around the input and inserted content. This object allows you to customise that wrapping element. See macro options for inputWrapper.
attributes object HTML attributes (for example data attributes) to add to the input.
Options for prefix object
Name Type Description
text string Required. Required. If html is set, this is not required. Text to use within the prefix. If html is provided, the text option will be ignored.
html string Required. Required. If text is set, this is not required. HTML to use within the prefix. If html is provided, the text option will be ignored.
classes string Classes to add to the prefix.
attributes object HTML attributes (for example data attributes) to add to the prefix element.
Options for suffix object
Name Type Description
text string Required. If html is set, this is not required. Text to use within the suffix. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within the suffix. If html is provided, the text option will be ignored.
classes string Classes to add to the suffix element.
attributes object HTML attributes (for example data attributes) to add to the suffix element.
Options for formGroup object
Name Type Description
classes string Classes to add to the form group (for example to show error state for the whole group).
attributes object HTML attributes (for example data attributes) to add to the form group.
beforeInput object Content to add before the input used by the text input component. See macro options for formGroup beforeInput.
afterInput object Content to add after the input used by the text input component. See macro options for formGroup afterInput.
Options for formGroup beforeInput object
Name Type Description
text string Required. Text to add before the input. If html is provided, the text option will be ignored.
html string Required. HTML to add before the input. If html is provided, the text option will be ignored.
Options for formGroup afterInput object
Name Type Description
text string Required. Text to add after the input. If html is provided, the text option will be ignored.
html string Required. HTML to add after the input. If html is provided, the text option will be ignored.
Options for inputWrapper object
Name Type Description
classes string Classes to add to the wrapping element.
attributes object HTML attributes (for example data attributes) to add to the wrapping element.
Options for label component
Name Type Description
id string The ID of the label.
text string Required. If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored.
caller nunjucks-block Not strictly a parameter but Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire label component in a call block.
for string The value of the for attribute, the ID of the input the label is associated with.
isPageHeading boolean Whether the label also acts as the heading for the page.
size string Size of the label – "s", "m", "l" or "xl".
classes string Classes to add to the label tag.
attributes object HTML attributes (for example data attributes) to add to the label tag. 
{% from "input/macro.njk" import input %}

{{ input({
  label: {
    text: "Full width"
  },
  classes: "nhsuk-u-width-full",
  id: "full",
  name: "full"
}) }}

{{ input({
  label: {
    text: "Three-quarters width"
  },
  classes: "nhsuk-u-width-three-quarters",
  id: "three-quarters",
  name: "threeQuarters"
}) }}

{{ input({
  label: {
    text: "Two-thirds width"
  },
  classes: "nhsuk-u-width-two-thirds",
  id: "two-thirds",
  name: "twoThirds"
}) }}

{{ input({
  label: {
    text: "One-half width"
  },
  classes: "nhsuk-u-width-one-half",
  id: "one-half",
  name: "oneHalf"
}) }}

{{ input({
  label: {
    text: "One-third width"
  },
  classes: "nhsuk-u-width-one-third",
  id: "one-third",
  name: "oneThird"
}) }}

{{ input({
  label: {
    text: "One-quarter width"
  },
  classes: "nhsuk-u-width-one-quarter",
  id: "one-quarter",
  name: "oneQuarter"
}) }}

Using hint text

You can use hint text to give users help in context, so they understand what they need to enter. For example, use it to tell users where to find information or how you will use their data. Read more about hint text.

Open this example in a new tab: text input hint text 
<div class="nhsuk-form-group">
  <label class="nhsuk-label" for="example-with-hint-text">
    Enter a full postcode in England
  </label>
  <div class="nhsuk-hint" id="example-with-hint-text-hint">
    For example, LS1 1AB
  </div>
  <input class="nhsuk-input nhsuk-input--width-10" id="example-with-hint-text" name="exampleWithHintText" type="text" spellcheck="false" aria-describedby="example-with-hint-text-hint" autocomplete="postal-code">
</div>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work. These are marked as "Required" in the option description. Deprecated options are marked as "Deprecated".

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
id string The ID of the input. Defaults to the value of name.
name string Required. The name of the input, which is submitted with the form data.
type string Type of input control, for example, an email input control. Defaults to "text".
inputmode string Optional value for the inputmode attribute.
value string Optional initial value of the input.
disabled boolean If true, input will be disabled.
describedBy string One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
label object Required. The label used by the text input component. See macro options for label.
hint object Can be used to add a hint to a text input component. See macro options for hint.
errorMessage object Can be used to add an error message to the text input component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. See macro options for errorMessage.
prefix object Can be used to add a prefix to the text input component. See macro options for prefix.
suffix object Can be used to add a suffix to the text input component. See macro options for suffix.
code boolean If set to true, use a monospace font for codes or sequences.
width integer Optional fixed width for the text input component – 2, 3, 4, 5, 10, 20 or 30.
formGroup object Additional options for the form group containing the text input component. See macro options for formGroup.
classes string Classes to add to the input.
autocomplete string Attribute to meet WCAG success criterion 1.3.5: Identify input purpose, for instance "bday-day". See the Autofill section in the HTML standard for a full list of attributes that can be used.
pattern string Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
placeholder string Attribute to provide placeholder text for the input.
spellcheck boolean Optional field to enable or disable the spellcheck attribute on the input.
autocapitalize string Optional field to enable or disable autocapitalisation of user input. See the Autocapitalization section in the HTML standard for a full list of values that can be used.
inputWrapper object If any of prefix, suffix, formGroup.beforeInput or formGroup.afterInput have a value, a wrapping element is added around the input and inserted content. This object allows you to customise that wrapping element. See macro options for inputWrapper.
attributes object HTML attributes (for example data attributes) to add to the input.
Options for prefix object
Name Type Description
text string Required. Required. If html is set, this is not required. Text to use within the prefix. If html is provided, the text option will be ignored.
html string Required. Required. If text is set, this is not required. HTML to use within the prefix. If html is provided, the text option will be ignored.
classes string Classes to add to the prefix.
attributes object HTML attributes (for example data attributes) to add to the prefix element.
Options for suffix object
Name Type Description
text string Required. If html is set, this is not required. Text to use within the suffix. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within the suffix. If html is provided, the text option will be ignored.
classes string Classes to add to the suffix element.
attributes object HTML attributes (for example data attributes) to add to the suffix element.
Options for formGroup object
Name Type Description
classes string Classes to add to the form group (for example to show error state for the whole group).
attributes object HTML attributes (for example data attributes) to add to the form group.
beforeInput object Content to add before the input used by the text input component. See macro options for formGroup beforeInput.
afterInput object Content to add after the input used by the text input component. See macro options for formGroup afterInput.
Options for formGroup beforeInput object
Name Type Description
text string Required. Text to add before the input. If html is provided, the text option will be ignored.
html string Required. HTML to add before the input. If html is provided, the text option will be ignored.
Options for formGroup afterInput object
Name Type Description
text string Required. Text to add after the input. If html is provided, the text option will be ignored.
html string Required. HTML to add after the input. If html is provided, the text option will be ignored.
Options for inputWrapper object
Name Type Description
classes string Classes to add to the wrapping element.
attributes object HTML attributes (for example data attributes) to add to the wrapping element.
Options for label component
Name Type Description
id string The ID of the label.
text string Required. If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored.
caller nunjucks-block Not strictly a parameter but Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire label component in a call block.
for string The value of the for attribute, the ID of the input the label is associated with.
isPageHeading boolean Whether the label also acts as the heading for the page.
size string Size of the label – "s", "m", "l" or "xl".
classes string Classes to add to the label tag.
attributes object HTML attributes (for example data attributes) to add to the label tag. 
{% from "input/macro.njk" import input %}

{{ input({
  label: {
    text: "Enter a full postcode in England"
  },
    hint: {
    text: "For example, LS1 1AB"
  },
  id: "example-with-hint-text",
  name: "exampleWithHintText",
  classes: "nhsuk-input--width-10",
  autocomplete: "postal-code",
  spellcheck: false
}) }}

Asking for numbers

Whole numbers

If you're asking the user to enter a whole number, set the inputmode attribute to numeric to use the numeric keypad on devices with on-screen keyboards.

Open this example in a new tab: text input number 
<div class="nhsuk-form-group">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--l" for="account-number">
      What is your account number?
    </label>
  </h1>
  <div class="nhsuk-hint" id="account-number-hint">
    Must be between 6 and 8 digits long
  </div>
  <input class="nhsuk-input nhsuk-input--width-10 nhsuk-input--code" id="account-number" name="accountNumber" type="text" spellcheck="false" aria-describedby="account-number-hint" inputmode="numeric">
</div>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work. These are marked as "Required" in the option description. Deprecated options are marked as "Deprecated".

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
id string The ID of the input. Defaults to the value of name.
name string Required. The name of the input, which is submitted with the form data.
type string Type of input control, for example, an email input control. Defaults to "text".
inputmode string Optional value for the inputmode attribute.
value string Optional initial value of the input.
disabled boolean If true, input will be disabled.
describedBy string One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
label object Required. The label used by the text input component. See macro options for label.
hint object Can be used to add a hint to a text input component. See macro options for hint.
errorMessage object Can be used to add an error message to the text input component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. See macro options for errorMessage.
prefix object Can be used to add a prefix to the text input component. See macro options for prefix.
suffix object Can be used to add a suffix to the text input component. See macro options for suffix.
code boolean If set to true, use a monospace font for codes or sequences.
width integer Optional fixed width for the text input component – 2, 3, 4, 5, 10, 20 or 30.
formGroup object Additional options for the form group containing the text input component. See macro options for formGroup.
classes string Classes to add to the input.
autocomplete string Attribute to meet WCAG success criterion 1.3.5: Identify input purpose, for instance "bday-day". See the Autofill section in the HTML standard for a full list of attributes that can be used.
pattern string Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
placeholder string Attribute to provide placeholder text for the input.
spellcheck boolean Optional field to enable or disable the spellcheck attribute on the input.
autocapitalize string Optional field to enable or disable autocapitalisation of user input. See the Autocapitalization section in the HTML standard for a full list of values that can be used.
inputWrapper object If any of prefix, suffix, formGroup.beforeInput or formGroup.afterInput have a value, a wrapping element is added around the input and inserted content. This object allows you to customise that wrapping element. See macro options for inputWrapper.
attributes object HTML attributes (for example data attributes) to add to the input.
Options for prefix object
Name Type Description
text string Required. Required. If html is set, this is not required. Text to use within the prefix. If html is provided, the text option will be ignored.
html string Required. Required. If text is set, this is not required. HTML to use within the prefix. If html is provided, the text option will be ignored.
classes string Classes to add to the prefix.
attributes object HTML attributes (for example data attributes) to add to the prefix element.
Options for suffix object
Name Type Description
text string Required. If html is set, this is not required. Text to use within the suffix. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within the suffix. If html is provided, the text option will be ignored.
classes string Classes to add to the suffix element.
attributes object HTML attributes (for example data attributes) to add to the suffix element.
Options for formGroup object
Name Type Description
classes string Classes to add to the form group (for example to show error state for the whole group).
attributes object HTML attributes (for example data attributes) to add to the form group.
beforeInput object Content to add before the input used by the text input component. See macro options for formGroup beforeInput.
afterInput object Content to add after the input used by the text input component. See macro options for formGroup afterInput.
Options for formGroup beforeInput object
Name Type Description
text string Required. Text to add before the input. If html is provided, the text option will be ignored.
html string Required. HTML to add before the input. If html is provided, the text option will be ignored.
Options for formGroup afterInput object
Name Type Description
text string Required. Text to add after the input. If html is provided, the text option will be ignored.
html string Required. HTML to add after the input. If html is provided, the text option will be ignored.
Options for inputWrapper object
Name Type Description
classes string Classes to add to the wrapping element.
attributes object HTML attributes (for example data attributes) to add to the wrapping element.
Options for label component
Name Type Description
id string The ID of the label.
text string Required. If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored.
caller nunjucks-block Not strictly a parameter but Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire label component in a call block.
for string The value of the for attribute, the ID of the input the label is associated with.
isPageHeading boolean Whether the label also acts as the heading for the page.
size string Size of the label – "s", "m", "l" or "xl".
classes string Classes to add to the label tag.
attributes object HTML attributes (for example data attributes) to add to the label tag. 
{% from "input/macro.njk" import input %}

{{ input({
  label: {
    text: "What is your account number?",
    size: "l",
    isPageHeading: true
  },
  classes: "nhsuk-input--width-10 nhsuk-input--code",
  hint: {
    text: "Must be between 6 and 8 digits long"
  },
  id: "account-number",
  name: "accountNumber",
  inputmode: "numeric",
  spellcheck: false
}) }}

You should also follow the GOV.UK Design System guidance and turn off HTML5 validation to prevent browsers from validating the pattern attribute.

The GOV.UK Design System has specific guidance on how to ask for:

Decimal numbers

The GOV.UK Design System has guidance on asking for decimal numbers.

Codes and sequences

Help the user visually check the code they've typed is correct by slightly increasing the spacing between characters. Do this by adding the nhsuk-input--code class to the input to make the input text use a monospace font. This is important if you're asking the user to enter a code or sequence they're unlikely to remember, such as an NHS number, booking reference or security code.

You do not need to do this for memorable information, such as phone numbers and postcodes.

Open this example in a new tab: text input codes and sequences 
<div class="nhsuk-form-group">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--l" for="nhs-number">
      What is your NHS number?
    </label>
  </h1>
  <div class="nhsuk-hint" id="nhs-number-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--width-10 nhsuk-input--code" id="nhs-number" name="nhs-number" type="text" spellcheck="false" value="999 123 4567" aria-describedby="nhs-number-hint" inputmode="numeric">
</div>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work. These are marked as "Required" in the option description. Deprecated options are marked as "Deprecated".

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
id string The ID of the input. Defaults to the value of name.
name string Required. The name of the input, which is submitted with the form data.
type string Type of input control, for example, an email input control. Defaults to "text".
inputmode string Optional value for the inputmode attribute.
value string Optional initial value of the input.
disabled boolean If true, input will be disabled.
describedBy string One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
label object Required. The label used by the text input component. See macro options for label.
hint object Can be used to add a hint to a text input component. See macro options for hint.
errorMessage object Can be used to add an error message to the text input component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. See macro options for errorMessage.
prefix object Can be used to add a prefix to the text input component. See macro options for prefix.
suffix object Can be used to add a suffix to the text input component. See macro options for suffix.
code boolean If set to true, use a monospace font for codes or sequences.
width integer Optional fixed width for the text input component – 2, 3, 4, 5, 10, 20 or 30.
formGroup object Additional options for the form group containing the text input component. See macro options for formGroup.
classes string Classes to add to the input.
autocomplete string Attribute to meet WCAG success criterion 1.3.5: Identify input purpose, for instance "bday-day". See the Autofill section in the HTML standard for a full list of attributes that can be used.
pattern string Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
placeholder string Attribute to provide placeholder text for the input.
spellcheck boolean Optional field to enable or disable the spellcheck attribute on the input.
autocapitalize string Optional field to enable or disable autocapitalisation of user input. See the Autocapitalization section in the HTML standard for a full list of values that can be used.
inputWrapper object If any of prefix, suffix, formGroup.beforeInput or formGroup.afterInput have a value, a wrapping element is added around the input and inserted content. This object allows you to customise that wrapping element. See macro options for inputWrapper.
attributes object HTML attributes (for example data attributes) to add to the input.
Options for prefix object
Name Type Description
text string Required. Required. If html is set, this is not required. Text to use within the prefix. If html is provided, the text option will be ignored.
html string Required. Required. If text is set, this is not required. HTML to use within the prefix. If html is provided, the text option will be ignored.
classes string Classes to add to the prefix.
attributes object HTML attributes (for example data attributes) to add to the prefix element.
Options for suffix object
Name Type Description
text string Required. If html is set, this is not required. Text to use within the suffix. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within the suffix. If html is provided, the text option will be ignored.
classes string Classes to add to the suffix element.
attributes object HTML attributes (for example data attributes) to add to the suffix element.
Options for formGroup object
Name Type Description
classes string Classes to add to the form group (for example to show error state for the whole group).
attributes object HTML attributes (for example data attributes) to add to the form group.
beforeInput object Content to add before the input used by the text input component. See macro options for formGroup beforeInput.
afterInput object Content to add after the input used by the text input component. See macro options for formGroup afterInput.
Options for formGroup beforeInput object
Name Type Description
text string Required. Text to add before the input. If html is provided, the text option will be ignored.
html string Required. HTML to add before the input. If html is provided, the text option will be ignored.
Options for formGroup afterInput object
Name Type Description
text string Required. Text to add after the input. If html is provided, the text option will be ignored.
html string Required. HTML to add after the input. If html is provided, the text option will be ignored.
Options for inputWrapper object
Name Type Description
classes string Classes to add to the wrapping element.
attributes object HTML attributes (for example data attributes) to add to the wrapping element.
Options for label component
Name Type Description
id string The ID of the label.
text string Required. If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored.
caller nunjucks-block Not strictly a parameter but Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire label component in a call block.
for string The value of the for attribute, the ID of the input the label is associated with.
isPageHeading boolean Whether the label also acts as the heading for the page.
size string Size of the label – "s", "m", "l" or "xl".
classes string Classes to add to the label tag.
attributes object HTML attributes (for example data attributes) to add to the label tag. 
{% from 'input/macro.njk' import input %}

{% set dummyNhsNumber = "999 123 4567" %}

{{ 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">' + dummyNhsNumber + '</span>) that you can find on an NHS letter, prescription or in the NHS App'
  },
  id: "nhs-number",
  name: "nhs-number",
  classes: "nhsuk-input--width-10 nhsuk-input--code",
  value: dummyNhsNumber,
  inputmode: "numeric",
  spellcheck: false
}) }}

Prefixes and suffixes

Use prefixes and suffixes to help users enter things like currencies and measurements.

Open this example in a new tab: text input prefix and suffix 
<div class="nhsuk-form-group">
  <label class="nhsuk-label" for="cost-per-item">
    Cost per item, in pounds
  </label>
  <div class="nhsuk-input-wrapper">
    <div class="nhsuk-input-wrapper__prefix" aria-hidden="true">£</div>
    <input class="nhsuk-input nhsuk-input--width-5" id="cost-per-item" name="costPerItem" type="text" spellcheck="false">
    <div class="nhsuk-input-wrapper__suffix" aria-hidden="true">per item</div>
  </div>
</div>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work. These are marked as "Required" in the option description. Deprecated options are marked as "Deprecated".

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
id string The ID of the input. Defaults to the value of name.
name string Required. The name of the input, which is submitted with the form data.
type string Type of input control, for example, an email input control. Defaults to "text".
inputmode string Optional value for the inputmode attribute.
value string Optional initial value of the input.
disabled boolean If true, input will be disabled.
describedBy string One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
label object Required. The label used by the text input component. See macro options for label.
hint object Can be used to add a hint to a text input component. See macro options for hint.
errorMessage object Can be used to add an error message to the text input component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. See macro options for errorMessage.
prefix object Can be used to add a prefix to the text input component. See macro options for prefix.
suffix object Can be used to add a suffix to the text input component. See macro options for suffix.
code boolean If set to true, use a monospace font for codes or sequences.
width integer Optional fixed width for the text input component – 2, 3, 4, 5, 10, 20 or 30.
formGroup object Additional options for the form group containing the text input component. See macro options for formGroup.
classes string Classes to add to the input.
autocomplete string Attribute to meet WCAG success criterion 1.3.5: Identify input purpose, for instance "bday-day". See the Autofill section in the HTML standard for a full list of attributes that can be used.
pattern string Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
placeholder string Attribute to provide placeholder text for the input.
spellcheck boolean Optional field to enable or disable the spellcheck attribute on the input.
autocapitalize string Optional field to enable or disable autocapitalisation of user input. See the Autocapitalization section in the HTML standard for a full list of values that can be used.
inputWrapper object If any of prefix, suffix, formGroup.beforeInput or formGroup.afterInput have a value, a wrapping element is added around the input and inserted content. This object allows you to customise that wrapping element. See macro options for inputWrapper.
attributes object HTML attributes (for example data attributes) to add to the input.
Options for prefix object
Name Type Description
text string Required. Required. If html is set, this is not required. Text to use within the prefix. If html is provided, the text option will be ignored.
html string Required. Required. If text is set, this is not required. HTML to use within the prefix. If html is provided, the text option will be ignored.
classes string Classes to add to the prefix.
attributes object HTML attributes (for example data attributes) to add to the prefix element.
Options for suffix object
Name Type Description
text string Required. If html is set, this is not required. Text to use within the suffix. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within the suffix. If html is provided, the text option will be ignored.
classes string Classes to add to the suffix element.
attributes object HTML attributes (for example data attributes) to add to the suffix element.
Options for formGroup object
Name Type Description
classes string Classes to add to the form group (for example to show error state for the whole group).
attributes object HTML attributes (for example data attributes) to add to the form group.
beforeInput object Content to add before the input used by the text input component. See macro options for formGroup beforeInput.
afterInput object Content to add after the input used by the text input component. See macro options for formGroup afterInput.
Options for formGroup beforeInput object
Name Type Description
text string Required. Text to add before the input. If html is provided, the text option will be ignored.
html string Required. HTML to add before the input. If html is provided, the text option will be ignored.
Options for formGroup afterInput object
Name Type Description
text string Required. Text to add after the input. If html is provided, the text option will be ignored.
html string Required. HTML to add after the input. If html is provided, the text option will be ignored.
Options for inputWrapper object
Name Type Description
classes string Classes to add to the wrapping element.
attributes object HTML attributes (for example data attributes) to add to the wrapping element.
Options for label component
Name Type Description
id string The ID of the label.
text string Required. If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored.
caller nunjucks-block Not strictly a parameter but Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire label component in a call block.
for string The value of the for attribute, the ID of the input the label is associated with.
isPageHeading boolean Whether the label also acts as the heading for the page.
size string Size of the label – "s", "m", "l" or "xl".
classes string Classes to add to the label tag.
attributes object HTML attributes (for example data attributes) to add to the label tag. 
{% from "input/macro.njk" import input %}

{{ input({
  label: {
      text: "Cost per item, in pounds"
  },
  id: "cost-per-item",
  name: "costPerItem",
  prefix: "£",
  suffix: "per item",
  classes: "nhsuk-input--width-5",
  spellcheck: false
}) }}

Prefixes and suffixes are useful when there's a commonly understood symbol or abbreviation for the type of information you're asking for. Do not rely on prefixes or suffixes alone, because screen readers will not read them out.

If you need a specific type of information, say so in the input label or hint text as well. For example, put 'Cost, in pounds' in the input label and use the '£' symbol in the prefix.

Position prefixes and suffixes so that they're outside of their input. This is to avoid interfering with some browsers that might insert an icon into the input (for example to show or generate a password).

Some users may miss that the input already has a suffix or prefix, and enter a prefix or suffix into the input. Allow for this in your validation and do not show an error.

Text inputs with a prefix

Open this example in a new tab: text input prefix 
<div class="nhsuk-form-group">
  <label class="nhsuk-label" for="cost-pounds">
    Cost in pounds
  </label>
  <div class="nhsuk-input-wrapper">
    <div class="nhsuk-input-wrapper__prefix" aria-hidden="true">£</div>
    <input class="nhsuk-input nhsuk-input--width-5" id="cost-pounds" name="costPounds" type="text" spellcheck="false">
  </div>
</div>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work. These are marked as "Required" in the option description. Deprecated options are marked as "Deprecated".

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
id string The ID of the input. Defaults to the value of name.
name string Required. The name of the input, which is submitted with the form data.
type string Type of input control, for example, an email input control. Defaults to "text".
inputmode string Optional value for the inputmode attribute.
value string Optional initial value of the input.
disabled boolean If true, input will be disabled.
describedBy string One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
label object Required. The label used by the text input component. See macro options for label.
hint object Can be used to add a hint to a text input component. See macro options for hint.
errorMessage object Can be used to add an error message to the text input component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. See macro options for errorMessage.
prefix object Can be used to add a prefix to the text input component. See macro options for prefix.
suffix object Can be used to add a suffix to the text input component. See macro options for suffix.
code boolean If set to true, use a monospace font for codes or sequences.
width integer Optional fixed width for the text input component – 2, 3, 4, 5, 10, 20 or 30.
formGroup object Additional options for the form group containing the text input component. See macro options for formGroup.
classes string Classes to add to the input.
autocomplete string Attribute to meet WCAG success criterion 1.3.5: Identify input purpose, for instance "bday-day". See the Autofill section in the HTML standard for a full list of attributes that can be used.
pattern string Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
placeholder string Attribute to provide placeholder text for the input.
spellcheck boolean Optional field to enable or disable the spellcheck attribute on the input.
autocapitalize string Optional field to enable or disable autocapitalisation of user input. See the Autocapitalization section in the HTML standard for a full list of values that can be used.
inputWrapper object If any of prefix, suffix, formGroup.beforeInput or formGroup.afterInput have a value, a wrapping element is added around the input and inserted content. This object allows you to customise that wrapping element. See macro options for inputWrapper.
attributes object HTML attributes (for example data attributes) to add to the input.
Options for prefix object
Name Type Description
text string Required. Required. If html is set, this is not required. Text to use within the prefix. If html is provided, the text option will be ignored.
html string Required. Required. If text is set, this is not required. HTML to use within the prefix. If html is provided, the text option will be ignored.
classes string Classes to add to the prefix.
attributes object HTML attributes (for example data attributes) to add to the prefix element.
Options for suffix object
Name Type Description
text string Required. If html is set, this is not required. Text to use within the suffix. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within the suffix. If html is provided, the text option will be ignored.
classes string Classes to add to the suffix element.
attributes object HTML attributes (for example data attributes) to add to the suffix element.
Options for formGroup object
Name Type Description
classes string Classes to add to the form group (for example to show error state for the whole group).
attributes object HTML attributes (for example data attributes) to add to the form group.
beforeInput object Content to add before the input used by the text input component. See macro options for formGroup beforeInput.
afterInput object Content to add after the input used by the text input component. See macro options for formGroup afterInput.
Options for formGroup beforeInput object
Name Type Description
text string Required. Text to add before the input. If html is provided, the text option will be ignored.
html string Required. HTML to add before the input. If html is provided, the text option will be ignored.
Options for formGroup afterInput object
Name Type Description
text string Required. Text to add after the input. If html is provided, the text option will be ignored.
html string Required. HTML to add after the input. If html is provided, the text option will be ignored.
Options for inputWrapper object
Name Type Description
classes string Classes to add to the wrapping element.
attributes object HTML attributes (for example data attributes) to add to the wrapping element.
Options for label component
Name Type Description
id string The ID of the label.
text string Required. If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored.
caller nunjucks-block Not strictly a parameter but Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire label component in a call block.
for string The value of the for attribute, the ID of the input the label is associated with.
isPageHeading boolean Whether the label also acts as the heading for the page.
size string Size of the label – "s", "m", "l" or "xl".
classes string Classes to add to the label tag.
attributes object HTML attributes (for example data attributes) to add to the label tag. 
{% from "input/macro.njk" import input %}

{{ input({
  label: {
      text: "Cost in pounds"
  },
  id: "cost-pounds",
  name: "costPounds",
  prefix: "£",
  classes: "nhsuk-input--width-5",
  spellcheck: false
}) }}

Text inputs with a suffix

Open this example in a new tab: text input suffix 
<div class="nhsuk-form-group">
  <label class="nhsuk-label" for="weight">
    Weight in kilograms
  </label>
  <div class="nhsuk-input-wrapper">
    <input class="nhsuk-input nhsuk-input--width-5" id="weight" name="weight" type="text" spellcheck="false">
    <div class="nhsuk-input-wrapper__suffix" aria-hidden="true">kg</div>
  </div>
</div>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work. These are marked as "Required" in the option description. Deprecated options are marked as "Deprecated".

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
id string The ID of the input. Defaults to the value of name.
name string Required. The name of the input, which is submitted with the form data.
type string Type of input control, for example, an email input control. Defaults to "text".
inputmode string Optional value for the inputmode attribute.
value string Optional initial value of the input.
disabled boolean If true, input will be disabled.
describedBy string One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
label object Required. The label used by the text input component. See macro options for label.
hint object Can be used to add a hint to a text input component. See macro options for hint.
errorMessage object Can be used to add an error message to the text input component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. See macro options for errorMessage.
prefix object Can be used to add a prefix to the text input component. See macro options for prefix.
suffix object Can be used to add a suffix to the text input component. See macro options for suffix.
code boolean If set to true, use a monospace font for codes or sequences.
width integer Optional fixed width for the text input component – 2, 3, 4, 5, 10, 20 or 30.
formGroup object Additional options for the form group containing the text input component. See macro options for formGroup.
classes string Classes to add to the input.
autocomplete string Attribute to meet WCAG success criterion 1.3.5: Identify input purpose, for instance "bday-day". See the Autofill section in the HTML standard for a full list of attributes that can be used.
pattern string Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
placeholder string Attribute to provide placeholder text for the input.
spellcheck boolean Optional field to enable or disable the spellcheck attribute on the input.
autocapitalize string Optional field to enable or disable autocapitalisation of user input. See the Autocapitalization section in the HTML standard for a full list of values that can be used.
inputWrapper object If any of prefix, suffix, formGroup.beforeInput or formGroup.afterInput have a value, a wrapping element is added around the input and inserted content. This object allows you to customise that wrapping element. See macro options for inputWrapper.
attributes object HTML attributes (for example data attributes) to add to the input.
Options for prefix object
Name Type Description
text string Required. Required. If html is set, this is not required. Text to use within the prefix. If html is provided, the text option will be ignored.
html string Required. Required. If text is set, this is not required. HTML to use within the prefix. If html is provided, the text option will be ignored.
classes string Classes to add to the prefix.
attributes object HTML attributes (for example data attributes) to add to the prefix element.
Options for suffix object
Name Type Description
text string Required. If html is set, this is not required. Text to use within the suffix. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within the suffix. If html is provided, the text option will be ignored.
classes string Classes to add to the suffix element.
attributes object HTML attributes (for example data attributes) to add to the suffix element.
Options for formGroup object
Name Type Description
classes string Classes to add to the form group (for example to show error state for the whole group).
attributes object HTML attributes (for example data attributes) to add to the form group.
beforeInput object Content to add before the input used by the text input component. See macro options for formGroup beforeInput.
afterInput object Content to add after the input used by the text input component. See macro options for formGroup afterInput.
Options for formGroup beforeInput object
Name Type Description
text string Required. Text to add before the input. If html is provided, the text option will be ignored.
html string Required. HTML to add before the input. If html is provided, the text option will be ignored.
Options for formGroup afterInput object
Name Type Description
text string Required. Text to add after the input. If html is provided, the text option will be ignored.
html string Required. HTML to add after the input. If html is provided, the text option will be ignored.
Options for inputWrapper object
Name Type Description
classes string Classes to add to the wrapping element.
attributes object HTML attributes (for example data attributes) to add to the wrapping element.
Options for label component
Name Type Description
id string The ID of the label.
text string Required. If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored.
caller nunjucks-block Not strictly a parameter but Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire label component in a call block.
for string The value of the for attribute, the ID of the input the label is associated with.
isPageHeading boolean Whether the label also acts as the heading for the page.
size string Size of the label – "s", "m", "l" or "xl".
classes string Classes to add to the label tag.
attributes object HTML attributes (for example data attributes) to add to the label tag. 
{% from "input/macro.njk" import input %}

{{ input({
  label: {
      text: "Weight in kilograms"
  },
  id: "weight",
  name: "weight",
  suffix: "kg",
  classes: "nhsuk-input--width-5",
  spellcheck: false
}) }}

Error messages

Style error messages like this.

Open this example in a new tab: text input error 
<div class="nhsuk-form-group nhsuk-form-group--error">
  <label class="nhsuk-label" for="full-name">
    Full name
  </label>
  <span class="nhsuk-error-message" id="full-name-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Enter your full name
  </span>
  <input class="nhsuk-input nhsuk-input--error nhsuk-input--width-10" id="full-name" name="fullName" type="text" aria-describedby="full-name-error">
</div>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work. These are marked as "Required" in the option description. Deprecated options are marked as "Deprecated".

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
id string The ID of the input. Defaults to the value of name.
name string Required. The name of the input, which is submitted with the form data.
type string Type of input control, for example, an email input control. Defaults to "text".
inputmode string Optional value for the inputmode attribute.
value string Optional initial value of the input.
disabled boolean If true, input will be disabled.
describedBy string One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
label object Required. The label used by the text input component. See macro options for label.
hint object Can be used to add a hint to a text input component. See macro options for hint.
errorMessage object Can be used to add an error message to the text input component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. See macro options for errorMessage.
prefix object Can be used to add a prefix to the text input component. See macro options for prefix.
suffix object Can be used to add a suffix to the text input component. See macro options for suffix.
code boolean If set to true, use a monospace font for codes or sequences.
width integer Optional fixed width for the text input component – 2, 3, 4, 5, 10, 20 or 30.
formGroup object Additional options for the form group containing the text input component. See macro options for formGroup.
classes string Classes to add to the input.
autocomplete string Attribute to meet WCAG success criterion 1.3.5: Identify input purpose, for instance "bday-day". See the Autofill section in the HTML standard for a full list of attributes that can be used.
pattern string Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
placeholder string Attribute to provide placeholder text for the input.
spellcheck boolean Optional field to enable or disable the spellcheck attribute on the input.
autocapitalize string Optional field to enable or disable autocapitalisation of user input. See the Autocapitalization section in the HTML standard for a full list of values that can be used.
inputWrapper object If any of prefix, suffix, formGroup.beforeInput or formGroup.afterInput have a value, a wrapping element is added around the input and inserted content. This object allows you to customise that wrapping element. See macro options for inputWrapper.
attributes object HTML attributes (for example data attributes) to add to the input.
Options for prefix object
Name Type Description
text string Required. Required. If html is set, this is not required. Text to use within the prefix. If html is provided, the text option will be ignored.
html string Required. Required. If text is set, this is not required. HTML to use within the prefix. If html is provided, the text option will be ignored.
classes string Classes to add to the prefix.
attributes object HTML attributes (for example data attributes) to add to the prefix element.
Options for suffix object
Name Type Description
text string Required. If html is set, this is not required. Text to use within the suffix. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within the suffix. If html is provided, the text option will be ignored.
classes string Classes to add to the suffix element.
attributes object HTML attributes (for example data attributes) to add to the suffix element.
Options for formGroup object
Name Type Description
classes string Classes to add to the form group (for example to show error state for the whole group).
attributes object HTML attributes (for example data attributes) to add to the form group.
beforeInput object Content to add before the input used by the text input component. See macro options for formGroup beforeInput.
afterInput object Content to add after the input used by the text input component. See macro options for formGroup afterInput.
Options for formGroup beforeInput object
Name Type Description
text string Required. Text to add before the input. If html is provided, the text option will be ignored.
html string Required. HTML to add before the input. If html is provided, the text option will be ignored.
Options for formGroup afterInput object
Name Type Description
text string Required. Text to add after the input. If html is provided, the text option will be ignored.
html string Required. HTML to add after the input. If html is provided, the text option will be ignored.
Options for inputWrapper object
Name Type Description
classes string Classes to add to the wrapping element.
attributes object HTML attributes (for example data attributes) to add to the wrapping element.
Options for label component
Name Type Description
id string The ID of the label.
text string Required. If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored.
caller nunjucks-block Not strictly a parameter but Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire label component in a call block.
for string The value of the for attribute, the ID of the input the label is associated with.
isPageHeading boolean Whether the label also acts as the heading for the page.
size string Size of the label – "s", "m", "l" or "xl".
classes string Classes to add to the label tag.
attributes object HTML attributes (for example data attributes) to add to the label tag. 
{% from "input/macro.njk" import input %}

{{ input({
  label: {
    text: "Full name"
  },
  id: "full-name",
  name: "fullName",
  classes: "nhsuk-input--width-10",
  errorMessage: {
    text: "Enter your full name"
  }
}) }}

If the input has a prefix or a suffix

Open this example in a new tab: text input error and prefix and suffix 
<div class="nhsuk-form-group nhsuk-form-group--error">
  <label class="nhsuk-label" for="cost-pounds">
    Cost per item, in pounds
  </label>
  <span class="nhsuk-error-message" id="cost-pounds-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Enter a cost per item, in pounds
  </span>
  <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="cost-pounds" name="costPounds" type="text" spellcheck="false" aria-describedby="cost-pounds-error">
    <div class="nhsuk-input-wrapper__suffix" aria-hidden="true">per item</div>
  </div>
</div>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work. These are marked as "Required" in the option description. Deprecated options are marked as "Deprecated".

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
id string The ID of the input. Defaults to the value of name.
name string Required. The name of the input, which is submitted with the form data.
type string Type of input control, for example, an email input control. Defaults to "text".
inputmode string Optional value for the inputmode attribute.
value string Optional initial value of the input.
disabled boolean If true, input will be disabled.
describedBy string One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
label object Required. The label used by the text input component. See macro options for label.
hint object Can be used to add a hint to a text input component. See macro options for hint.
errorMessage object Can be used to add an error message to the text input component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. See macro options for errorMessage.
prefix object Can be used to add a prefix to the text input component. See macro options for prefix.
suffix object Can be used to add a suffix to the text input component. See macro options for suffix.
code boolean If set to true, use a monospace font for codes or sequences.
width integer Optional fixed width for the text input component – 2, 3, 4, 5, 10, 20 or 30.
formGroup object Additional options for the form group containing the text input component. See macro options for formGroup.
classes string Classes to add to the input.
autocomplete string Attribute to meet WCAG success criterion 1.3.5: Identify input purpose, for instance "bday-day". See the Autofill section in the HTML standard for a full list of attributes that can be used.
pattern string Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
placeholder string Attribute to provide placeholder text for the input.
spellcheck boolean Optional field to enable or disable the spellcheck attribute on the input.
autocapitalize string Optional field to enable or disable autocapitalisation of user input. See the Autocapitalization section in the HTML standard for a full list of values that can be used.
inputWrapper object If any of prefix, suffix, formGroup.beforeInput or formGroup.afterInput have a value, a wrapping element is added around the input and inserted content. This object allows you to customise that wrapping element. See macro options for inputWrapper.
attributes object HTML attributes (for example data attributes) to add to the input.
Options for prefix object
Name Type Description
text string Required. Required. If html is set, this is not required. Text to use within the prefix. If html is provided, the text option will be ignored.
html string Required. Required. If text is set, this is not required. HTML to use within the prefix. If html is provided, the text option will be ignored.
classes string Classes to add to the prefix.
attributes object HTML attributes (for example data attributes) to add to the prefix element.
Options for suffix object
Name Type Description
text string Required. If html is set, this is not required. Text to use within the suffix. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within the suffix. If html is provided, the text option will be ignored.
classes string Classes to add to the suffix element.
attributes object HTML attributes (for example data attributes) to add to the suffix element.
Options for formGroup object
Name Type Description
classes string Classes to add to the form group (for example to show error state for the whole group).
attributes object HTML attributes (for example data attributes) to add to the form group.
beforeInput object Content to add before the input used by the text input component. See macro options for formGroup beforeInput.
afterInput object Content to add after the input used by the text input component. See macro options for formGroup afterInput.
Options for formGroup beforeInput object
Name Type Description
text string Required. Text to add before the input. If html is provided, the text option will be ignored.
html string Required. HTML to add before the input. If html is provided, the text option will be ignored.
Options for formGroup afterInput object
Name Type Description
text string Required. Text to add after the input. If html is provided, the text option will be ignored.
html string Required. HTML to add after the input. If html is provided, the text option will be ignored.
Options for inputWrapper object
Name Type Description
classes string Classes to add to the wrapping element.
attributes object HTML attributes (for example data attributes) to add to the wrapping element.
Options for label component
Name Type Description
id string The ID of the label.
text string Required. If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored.
caller nunjucks-block Not strictly a parameter but Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire label component in a call block.
for string The value of the for attribute, the ID of the input the label is associated with.
isPageHeading boolean Whether the label also acts as the heading for the page.
size string Size of the label – "s", "m", "l" or "xl".
classes string Classes to add to the label tag.
attributes object HTML attributes (for example data attributes) to add to the label tag. 
{% from "input/macro.njk" import input %}

{{ input({
  label: {
    text: "Cost per item, in pounds"
  },
  id: "cost-pounds",
  name: "costPounds",
  prefix: "£",
  suffix: "per item",
  errorMessage: {
    text: "Enter a cost per item, in pounds"
  },
  classes: "nhsuk-input--width-5",
  spellcheck: false
}) }}

Follow:

Do not disable copy and paste

Users often need to copy and paste information into a text input, so do not stop them doing this.

Research

If you've used text input, please share your user research findings.

Help us improve this guidance

Share insights or feedback and take part in the discussion. We use GitHub as a collaboration space. All the information on it is open to the public.

Feed back or share insights on GitHub

Read more about how to feed back or share insights.

If you have any questions, get in touch with the service manual team.

Updated: November 2025