Form elements - Text input
Use text input to let users enter a single line of text.
<div class="nhsuk-form-group">
<label class="nhsuk-label" for="example">
What is your name?
</label>
<input class="nhsuk-input" id="example" name="example" type="text">
</div>
{% from 'input/macro.njk' import input %}
{{ input({
"label": {
"text": "What is your name?"
},
"id": "example",
"name": "example"
}) }}
When to use text input
Use text input 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 text input
Do not use text input if you need users to enter longer answers that might span several lines. In this case, use textarea.
How to use text input
Label text inputs
Give text input 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.
<div class="nhsuk-form-group">
<h1 class="nhsuk-label-wrapper">
<label class="nhsuk-label nhsuk-label--l" for="example-heading">
What is your name?
</label>
</h1>
<input class="nhsuk-input" id="example-heading" name="example-heading" type="text">
</div>
{% from 'input/macro.njk' import input %}
{{ input({
"label": {
"text": "What is your name?",
"classes": "nhsuk-label--l",
"isPageHeading": true
},
"id": "example-heading",
"name": "example-heading"
}) }}
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>
{% 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>
{% 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
Use hint text to give users help in context, for example, 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">
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">
</div>
{% 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"
}) }}
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--error" id="example" name="example" type="text" aria-describedby="example-error">
</div>
{% from 'input/macro.njk' import input %}
{{ input({
"label": {
"text": "Full name"
},
"id": "example",
"name": "example",
"errorMessage": {
"text": "Enter your full name"
}
}) }}
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 improve this page
The manual is a community effort. Anyone can help improve and grow it.
To help make sure the Text input guidance is useful, relevant and up to date, you can:
- share research or feedback about the Text input component on GitHub
- propose a code change to this page on GitHub
Need help?
If you’ve got a question about the NHS digital service manual or want to feedback, get in touch.
Updated: September 2020