Use text input to let users enter a single line of text.
<div class="nhsuk-form-group">
<label class="nhsuk-label" for="example">
Full name
</label>
<input class="nhsuk-input" id="example" name="example" 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.
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.
Name | Type | Required | Description |
---|---|---|---|
id | string | true | The id of the input. |
name | string | true | The name of the input, which is submitted with the form data. |
type | string | false | Type of input control to render. Defaults to "text". |
inputmode | string | false | Optional value for inputmode. |
value | string | false | Optional initial value of the input. |
describedBy | string | false | One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users. |
label | object | true | Options for the label component. |
hint | object | false | Options for the hint component. |
errorMessage | object | false | Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`. |
prefix | object | false | Options for the prefix element. |
prefix{}.text | string | true | Required. If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored. |
prefix{}.html | string | true | Required. If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored. |
prefix{}.classes | string | false | Classes to add to the prefix. |
prefix{}.attributes | object | false | HTML attributes (for example data attributes) to add to the prefix element. |
suffix | object | false | Options for the suffix element. |
suffix{}.text | string | true | Required. If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored. |
suffix{}.html | string | true | Required. If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored. |
suffix{}.classes | string | false | Classes to add to the suffix element. |
suffix{}.attributes | object | false | HTML attributes (for example data attributes) to add to the suffix element. |
formGroup | object | false | Options for the form-group wrapper |
formGroup{}.classes | string | false | Classes to add to the form group (for example to show error state for the whole group) |
classes | string | false | Classes to add to the input. |
autocomplete | string | false | autocomplete attribute to identify input purpose, for instance "postal-code" or "username". |
pattern | string | false | pattern attribute to provide a regular expression pattern, used to match allowed character combinations for the input value. |
spellcheck | boolean | false | Optional field to enable or disable the spellcheck attribute on the input. |
attributes | object | false | HTML attributes (for example data attributes) to add to the input. |
{% from 'input/macro.njk' import input %}
{{ input({
label: {
text: "Full name"
},
id: "example",
name: "example"
}) }}
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 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.
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.
<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="test-width-20" 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="test-width-10" 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="test-width-5" 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="test-width-4" 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="test-width-3" 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="test-width-2" 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.
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.
Name | Type | Required | Description |
---|---|---|---|
id | string | true | The id of the input. |
name | string | true | The name of the input, which is submitted with the form data. |
type | string | false | Type of input control to render. Defaults to "text". |
inputmode | string | false | Optional value for inputmode. |
value | string | false | Optional initial value of the input. |
describedBy | string | false | One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users. |
label | object | true | Options for the label component. |
hint | object | false | Options for the hint component. |
errorMessage | object | false | Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`. |
prefix | object | false | Options for the prefix element. |
prefix{}.text | string | true | Required. If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored. |
prefix{}.html | string | true | Required. If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored. |
prefix{}.classes | string | false | Classes to add to the prefix. |
prefix{}.attributes | object | false | HTML attributes (for example data attributes) to add to the prefix element. |
suffix | object | false | Options for the suffix element. |
suffix{}.text | string | true | Required. If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored. |
suffix{}.html | string | true | Required. If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored. |
suffix{}.classes | string | false | Classes to add to the suffix element. |
suffix{}.attributes | object | false | HTML attributes (for example data attributes) to add to the suffix element. |
formGroup | object | false | Options for the form-group wrapper |
formGroup{}.classes | string | false | Classes to add to the form group (for example to show error state for the whole group) |
classes | string | false | Classes to add to the input. |
autocomplete | string | false | autocomplete attribute to identify input purpose, for instance "postal-code" or "username". |
pattern | string | false | pattern attribute to provide a regular expression pattern, used to match allowed character combinations for the input value. |
spellcheck | boolean | false | Optional field to enable or disable the spellcheck attribute on the input. |
attributes | object | false | HTML attributes (for example data attributes) to add to the input. |
{% from 'input/macro.njk' import input %}
{{ input({
label: {
text: "20 character width"
},
id: "input-width-20",
name: "test-width-20",
classes: "nhsuk-input--width-20"
}) }}
{{ input({
label: {
text: "10 character width"
},
id: "input-width-10",
name: "test-width-10",
classes: "nhsuk-input--width-10"
}) }}
{{ input({
label: {
text: "5 character width"
},
id: "input-width-5",
name: "test-width-5",
classes: "nhsuk-input--width-5"
}) }}
{{ input({
label: {
text: "4 character width"
},
id: "input-width-4",
name: "test-width-4",
classes: "nhsuk-input--width-4"
}) }}
{{ input({
label: {
text: "3 character width"
},
id: "input-width-3",
name: "test-width-3",
classes: "nhsuk-input--width-3"
}) }}
{{ input({
label: {
text: "2 character width"
},
id: "input-width-2",
name: "test-width-2",
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.
<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="three-quarters" 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="two-thirds" 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="one-half" 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="one-third" 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="one-quarter" 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.
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.
Name | Type | Required | Description |
---|---|---|---|
id | string | true | The id of the input. |
name | string | true | The name of the input, which is submitted with the form data. |
type | string | false | Type of input control to render. Defaults to "text". |
inputmode | string | false | Optional value for inputmode. |
value | string | false | Optional initial value of the input. |
describedBy | string | false | One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users. |
label | object | true | Options for the label component. |
hint | object | false | Options for the hint component. |
errorMessage | object | false | Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`. |
prefix | object | false | Options for the prefix element. |
prefix{}.text | string | true | Required. If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored. |
prefix{}.html | string | true | Required. If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored. |
prefix{}.classes | string | false | Classes to add to the prefix. |
prefix{}.attributes | object | false | HTML attributes (for example data attributes) to add to the prefix element. |
suffix | object | false | Options for the suffix element. |
suffix{}.text | string | true | Required. If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored. |
suffix{}.html | string | true | Required. If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored. |
suffix{}.classes | string | false | Classes to add to the suffix element. |
suffix{}.attributes | object | false | HTML attributes (for example data attributes) to add to the suffix element. |
formGroup | object | false | Options for the form-group wrapper |
formGroup{}.classes | string | false | Classes to add to the form group (for example to show error state for the whole group) |
classes | string | false | Classes to add to the input. |
autocomplete | string | false | autocomplete attribute to identify input purpose, for instance "postal-code" or "username". |
pattern | string | false | pattern attribute to provide a regular expression pattern, used to match allowed character combinations for the input value. |
spellcheck | boolean | false | Optional field to enable or disable the spellcheck attribute on the input. |
attributes | object | false | HTML attributes (for example data attributes) to add to the input. |
{% 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: "three-quarters"
}) }}
{{ input({
label: {
text: "Two-thirds width"
},
classes: "nhsuk-u-width-two-thirds",
id: "two-thirds",
name: "two-thirds"
}) }}
{{ input({
label: {
text: "One-half width"
},
classes: "nhsuk-u-width-one-half",
id: "one-half",
name: "one-half"
}) }}
{{ input({
label: {
text: "One-third width"
},
classes: "nhsuk-u-width-one-third",
id: "one-third",
name: "one-third"
}) }}
{{ input({
label: {
text: "One-quarter width"
},
classes: "nhsuk-u-width-one-quarter",
id: "one-quarter",
name: "one-quarter"
}) }}
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.
<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="example-with-hint-text" type="text" aria-describedby="example-with-hint-text-hint">
</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.
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.
Name | Type | Required | Description |
---|---|---|---|
id | string | true | The id of the input. |
name | string | true | The name of the input, which is submitted with the form data. |
type | string | false | Type of input control to render. Defaults to "text". |
inputmode | string | false | Optional value for inputmode. |
value | string | false | Optional initial value of the input. |
describedBy | string | false | One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users. |
label | object | true | Options for the label component. |
hint | object | false | Options for the hint component. |
errorMessage | object | false | Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`. |
prefix | object | false | Options for the prefix element. |
prefix{}.text | string | true | Required. If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored. |
prefix{}.html | string | true | Required. If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored. |
prefix{}.classes | string | false | Classes to add to the prefix. |
prefix{}.attributes | object | false | HTML attributes (for example data attributes) to add to the prefix element. |
suffix | object | false | Options for the suffix element. |
suffix{}.text | string | true | Required. If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored. |
suffix{}.html | string | true | Required. If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored. |
suffix{}.classes | string | false | Classes to add to the suffix element. |
suffix{}.attributes | object | false | HTML attributes (for example data attributes) to add to the suffix element. |
formGroup | object | false | Options for the form-group wrapper |
formGroup{}.classes | string | false | Classes to add to the form group (for example to show error state for the whole group) |
classes | string | false | Classes to add to the input. |
autocomplete | string | false | autocomplete attribute to identify input purpose, for instance "postal-code" or "username". |
pattern | string | false | pattern attribute to provide a regular expression pattern, used to match allowed character combinations for the input value. |
spellcheck | boolean | false | Optional field to enable or disable the spellcheck attribute on the input. |
attributes | object | false | HTML attributes (for example data attributes) to add to the input. |
{% 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: "example-with-hint-text",
classes: "nhsuk-input--width-10"
}) }}
Asking for numbers
Whole numbers
If you're asking the user to enter a whole number and you want to bring up the numeric keypad on a mobile device, set the inputmode
attribute to numeric
and the pattern
attribute to [0-9]*
. See how to do this in the HTML and Nunjucks tabs in the following example.
<div class="nhsuk-form-group">
<label class="nhsuk-label" for="example-with-hint-text">
What is your NHS number?
</label>
<div class="nhsuk-hint" id="example-with-hint-text-hint">
Your NHS number is a 10 digit number that you find on any letter the NHS has sent you. For example, 485 777 3456.
</div>
<input class="nhsuk-input nhsuk-input--width-10" id="example-with-hint-text" name="example-with-hint-text" type="text" aria-describedby="example-with-hint-text-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.
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.
Name | Type | Required | Description |
---|---|---|---|
id | string | true | The id of the input. |
name | string | true | The name of the input, which is submitted with the form data. |
type | string | false | Type of input control to render. Defaults to "text". |
inputmode | string | false | Optional value for inputmode. |
value | string | false | Optional initial value of the input. |
describedBy | string | false | One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users. |
label | object | true | Options for the label component. |
hint | object | false | Options for the hint component. |
errorMessage | object | false | Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`. |
prefix | object | false | Options for the prefix element. |
prefix{}.text | string | true | Required. If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored. |
prefix{}.html | string | true | Required. If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored. |
prefix{}.classes | string | false | Classes to add to the prefix. |
prefix{}.attributes | object | false | HTML attributes (for example data attributes) to add to the prefix element. |
suffix | object | false | Options for the suffix element. |
suffix{}.text | string | true | Required. If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored. |
suffix{}.html | string | true | Required. If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored. |
suffix{}.classes | string | false | Classes to add to the suffix element. |
suffix{}.attributes | object | false | HTML attributes (for example data attributes) to add to the suffix element. |
formGroup | object | false | Options for the form-group wrapper |
formGroup{}.classes | string | false | Classes to add to the form group (for example to show error state for the whole group) |
classes | string | false | Classes to add to the input. |
autocomplete | string | false | autocomplete attribute to identify input purpose, for instance "postal-code" or "username". |
pattern | string | false | pattern attribute to provide a regular expression pattern, used to match allowed character combinations for the input value. |
spellcheck | boolean | false | Optional field to enable or disable the spellcheck attribute on the input. |
attributes | object | false | HTML attributes (for example data attributes) to add to the input. |
{% from 'input/macro.njk' import input %}
{{ input({
label: {
text: "What is your NHS number?"
},
hint: {
text: "Your NHS number is a 10 digit number that you find on any letter the NHS has sent you. For example, 485 777 3456."
},
id: "example-with-hint-text",
name: "example-with-hint-text",
classes: "nhsuk-input--width-10",
inputmode: "numeric"
}) }}
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.
Prefixes and suffixes
Use prefixes and suffixes to help users enter things like currencies and measurements.
<div class="nhsuk-form-group">
<label class="nhsuk-label" for="example">
Cost per item, in pounds
</label>
<div class="nhsuk-input__wrapper">
<div class="nhsuk-input__prefix" aria-hidden="true">£</div>
<input class="nhsuk-input nhsuk-input--width-5" id="example" name="example" type="text">
<div class="nhsuk-input__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.
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.
Name | Type | Required | Description |
---|---|---|---|
id | string | true | The id of the input. |
name | string | true | The name of the input, which is submitted with the form data. |
type | string | false | Type of input control to render. Defaults to "text". |
inputmode | string | false | Optional value for inputmode. |
value | string | false | Optional initial value of the input. |
describedBy | string | false | One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users. |
label | object | true | Options for the label component. |
hint | object | false | Options for the hint component. |
errorMessage | object | false | Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`. |
prefix | object | false | Options for the prefix element. |
prefix{}.text | string | true | Required. If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored. |
prefix{}.html | string | true | Required. If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored. |
prefix{}.classes | string | false | Classes to add to the prefix. |
prefix{}.attributes | object | false | HTML attributes (for example data attributes) to add to the prefix element. |
suffix | object | false | Options for the suffix element. |
suffix{}.text | string | true | Required. If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored. |
suffix{}.html | string | true | Required. If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored. |
suffix{}.classes | string | false | Classes to add to the suffix element. |
suffix{}.attributes | object | false | HTML attributes (for example data attributes) to add to the suffix element. |
formGroup | object | false | Options for the form-group wrapper |
formGroup{}.classes | string | false | Classes to add to the form group (for example to show error state for the whole group) |
classes | string | false | Classes to add to the input. |
autocomplete | string | false | autocomplete attribute to identify input purpose, for instance "postal-code" or "username". |
pattern | string | false | pattern attribute to provide a regular expression pattern, used to match allowed character combinations for the input value. |
spellcheck | boolean | false | Optional field to enable or disable the spellcheck attribute on the input. |
attributes | object | false | HTML attributes (for example data attributes) to add to the input. |
{% from 'input/macro.njk' import input %}
{{ input({
label: {
text: "Cost per item, in pounds"
},
id: "example",
name: "example",
prefix: "£",
suffix: "per item",
classes: "nhsuk-input--width-5"
}) }}
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
<div class="nhsuk-form-group">
<label class="nhsuk-label" for="example">
Cost in pounds
</label>
<div class="nhsuk-input__wrapper">
<div class="nhsuk-input__prefix" aria-hidden="true">£</div>
<input class="nhsuk-input nhsuk-input--width-5" id="example" name="example" type="text">
</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.
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.
Name | Type | Required | Description |
---|---|---|---|
id | string | true | The id of the input. |
name | string | true | The name of the input, which is submitted with the form data. |
type | string | false | Type of input control to render. Defaults to "text". |
inputmode | string | false | Optional value for inputmode. |
value | string | false | Optional initial value of the input. |
describedBy | string | false | One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users. |
label | object | true | Options for the label component. |
hint | object | false | Options for the hint component. |
errorMessage | object | false | Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`. |
prefix | object | false | Options for the prefix element. |
prefix{}.text | string | true | Required. If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored. |
prefix{}.html | string | true | Required. If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored. |
prefix{}.classes | string | false | Classes to add to the prefix. |
prefix{}.attributes | object | false | HTML attributes (for example data attributes) to add to the prefix element. |
suffix | object | false | Options for the suffix element. |
suffix{}.text | string | true | Required. If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored. |
suffix{}.html | string | true | Required. If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored. |
suffix{}.classes | string | false | Classes to add to the suffix element. |
suffix{}.attributes | object | false | HTML attributes (for example data attributes) to add to the suffix element. |
formGroup | object | false | Options for the form-group wrapper |
formGroup{}.classes | string | false | Classes to add to the form group (for example to show error state for the whole group) |
classes | string | false | Classes to add to the input. |
autocomplete | string | false | autocomplete attribute to identify input purpose, for instance "postal-code" or "username". |
pattern | string | false | pattern attribute to provide a regular expression pattern, used to match allowed character combinations for the input value. |
spellcheck | boolean | false | Optional field to enable or disable the spellcheck attribute on the input. |
attributes | object | false | HTML attributes (for example data attributes) to add to the input. |
{% from 'input/macro.njk' import input %}
{{ input({
label: {
text: "Cost in pounds"
},
id: "example",
name: "example",
prefix: "£",
classes: "nhsuk-input--width-5"
}) }}
Text inputs with a suffix
<div class="nhsuk-form-group">
<label class="nhsuk-label" for="example">
Weight in kilograms
</label>
<div class="nhsuk-input__wrapper">
<input class="nhsuk-input nhsuk-input--width-5" id="example" name="example" type="text">
<div class="nhsuk-input__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.
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.
Name | Type | Required | Description |
---|---|---|---|
id | string | true | The id of the input. |
name | string | true | The name of the input, which is submitted with the form data. |
type | string | false | Type of input control to render. Defaults to "text". |
inputmode | string | false | Optional value for inputmode. |
value | string | false | Optional initial value of the input. |
describedBy | string | false | One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users. |
label | object | true | Options for the label component. |
hint | object | false | Options for the hint component. |
errorMessage | object | false | Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`. |
prefix | object | false | Options for the prefix element. |
prefix{}.text | string | true | Required. If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored. |
prefix{}.html | string | true | Required. If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored. |
prefix{}.classes | string | false | Classes to add to the prefix. |
prefix{}.attributes | object | false | HTML attributes (for example data attributes) to add to the prefix element. |
suffix | object | false | Options for the suffix element. |
suffix{}.text | string | true | Required. If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored. |
suffix{}.html | string | true | Required. If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored. |
suffix{}.classes | string | false | Classes to add to the suffix element. |
suffix{}.attributes | object | false | HTML attributes (for example data attributes) to add to the suffix element. |
formGroup | object | false | Options for the form-group wrapper |
formGroup{}.classes | string | false | Classes to add to the form group (for example to show error state for the whole group) |
classes | string | false | Classes to add to the input. |
autocomplete | string | false | autocomplete attribute to identify input purpose, for instance "postal-code" or "username". |
pattern | string | false | pattern attribute to provide a regular expression pattern, used to match allowed character combinations for the input value. |
spellcheck | boolean | false | Optional field to enable or disable the spellcheck attribute on the input. |
attributes | object | false | HTML attributes (for example data attributes) to add to the input. |
{% from 'input/macro.njk' import input %}
{{ input({
label: {
text: "Weight in kilograms"
},
id: "example",
name: "example",
suffix: "kg",
classes: "nhsuk-input--width-5"
}) }}
Error messages
Style error messages like this.
<div class="nhsuk-form-group nhsuk-form-group--error">
<label class="nhsuk-label" for="example">
Full name
</label>
<span class="nhsuk-error-message" id="example-error">
<span class="nhsuk-u-visually-hidden">Error:</span> Enter your full name
</span>
<input class="nhsuk-input nhsuk-input--width-10 nhsuk-input--error" id="example" name="example" type="text" aria-describedby="example-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.
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.
Name | Type | Required | Description |
---|---|---|---|
id | string | true | The id of the input. |
name | string | true | The name of the input, which is submitted with the form data. |
type | string | false | Type of input control to render. Defaults to "text". |
inputmode | string | false | Optional value for inputmode. |
value | string | false | Optional initial value of the input. |
describedBy | string | false | One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users. |
label | object | true | Options for the label component. |
hint | object | false | Options for the hint component. |
errorMessage | object | false | Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`. |
prefix | object | false | Options for the prefix element. |
prefix{}.text | string | true | Required. If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored. |
prefix{}.html | string | true | Required. If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored. |
prefix{}.classes | string | false | Classes to add to the prefix. |
prefix{}.attributes | object | false | HTML attributes (for example data attributes) to add to the prefix element. |
suffix | object | false | Options for the suffix element. |
suffix{}.text | string | true | Required. If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored. |
suffix{}.html | string | true | Required. If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored. |
suffix{}.classes | string | false | Classes to add to the suffix element. |
suffix{}.attributes | object | false | HTML attributes (for example data attributes) to add to the suffix element. |
formGroup | object | false | Options for the form-group wrapper |
formGroup{}.classes | string | false | Classes to add to the form group (for example to show error state for the whole group) |
classes | string | false | Classes to add to the input. |
autocomplete | string | false | autocomplete attribute to identify input purpose, for instance "postal-code" or "username". |
pattern | string | false | pattern attribute to provide a regular expression pattern, used to match allowed character combinations for the input value. |
spellcheck | boolean | false | Optional field to enable or disable the spellcheck attribute on the input. |
attributes | object | false | HTML attributes (for example data attributes) to add to the input. |
{% from 'input/macro.njk' import input %}
{{ input({
label: {
text: "Full name"
},
id: "example",
name: "example",
classes: "nhsuk-input--width-10",
errorMessage: {
text: "Enter your full name"
}
}) }}
If the input has a prefix or a suffix
- HTML code for error and prefix and suffix text input
- Nunjucks code for error and prefix and suffix text input
<div class="nhsuk-form-group nhsuk-form-group--error">
<label class="nhsuk-label" for="example">
Cost per item, in pounds
</label>
<span class="nhsuk-error-message" id="example-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__prefix" aria-hidden="true">£</div>
<input class="nhsuk-input nhsuk-input--width-5 nhsuk-input--error" id="example" name="example" type="text" aria-describedby="example-error">
<div class="nhsuk-input__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.
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.
Name | Type | Required | Description |
---|---|---|---|
id | string | true | The id of the input. |
name | string | true | The name of the input, which is submitted with the form data. |
type | string | false | Type of input control to render. Defaults to "text". |
inputmode | string | false | Optional value for inputmode. |
value | string | false | Optional initial value of the input. |
describedBy | string | false | One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users. |
label | object | true | Options for the label component. |
hint | object | false | Options for the hint component. |
errorMessage | object | false | Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`. |
prefix | object | false | Options for the prefix element. |
prefix{}.text | string | true | Required. If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored. |
prefix{}.html | string | true | Required. If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored. |
prefix{}.classes | string | false | Classes to add to the prefix. |
prefix{}.attributes | object | false | HTML attributes (for example data attributes) to add to the prefix element. |
suffix | object | false | Options for the suffix element. |
suffix{}.text | string | true | Required. If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored. |
suffix{}.html | string | true | Required. If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored. |
suffix{}.classes | string | false | Classes to add to the suffix element. |
suffix{}.attributes | object | false | HTML attributes (for example data attributes) to add to the suffix element. |
formGroup | object | false | Options for the form-group wrapper |
formGroup{}.classes | string | false | Classes to add to the form group (for example to show error state for the whole group) |
classes | string | false | Classes to add to the input. |
autocomplete | string | false | autocomplete attribute to identify input purpose, for instance "postal-code" or "username". |
pattern | string | false | pattern attribute to provide a regular expression pattern, used to match allowed character combinations for the input value. |
spellcheck | boolean | false | Optional field to enable or disable the spellcheck attribute on the input. |
attributes | object | false | HTML attributes (for example data attributes) to add to the input. |
{% from 'input/macro.njk' import input %}
{{ input({
label: {
text: "Cost per item, in pounds"
},
id: "example",
name: "example",
prefix: "£",
suffix: "per item",
classes: "nhsuk-input--width-5",
errorMessage: {
text: "Enter a cost per item, in pounds"
}
}) }}
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.
Read more about how to feedback or share insights.
If you have any questions, get in touch with the service manual team.
Updated: October 2023