Skip to main content

Text input

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

Code and design

Open in new window
Copy
<div class="nhsuk-form-group">
  <label class="nhsuk-label" for="input-width-10">
    NHS number
  </label>
  <input class="nhsuk-input nhsuk-input--width-10" id="input-width-10" name="test-width-10" type="text">
</div>
Copy
{% from 'input/macro.njk' import input %}

{{ input({
  "label": {
    "text": "NHS number"
  },
  "id": "input-width-10",
  "name": "test-width-10",
  "classes": "nhsuk-input--width-10"
}) }}

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’re asking just 1 question per page as the GOV.UK design system recommends, 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 telephone number inputs should be telephone 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 in new window
Copy
<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>
Copy
{% 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"
}) }}

Using hint text

Follow our advice on hint text and this example of hint text with text input.

Open in new window
Copy
<div class="nhsuk-form-group">
  <label class="nhsuk-label" for="input-with-hint-text">
    NHS number
  </label>
  <span class="nhsuk-hint" id="input-with-hint-text-hint">
    <p>This is a 10 digit number, like 485 777 3456.</p>
    <p>You can find it on any letter the NHS has sent you, on a prescription or by logging in to a GP practice online service.</p>
  </span>
  <input class="nhsuk-input" id="input-with-hint-text" name="test-name-2" type="text" aria-describedby="input-with-hint-text-hint">
</div>
Copy
{% from 'input/macro.njk' import input %}

{{ input({
  "label": {
    "text": "NHS number"
  },
    "hint": {
    "html": "<p>This is a 10 digit number, like 485 777 3456.</p> <p>You can find it on any letter the NHS has sent you, on a prescription or by logging in to a GP practice online service.</p>"
  },
    "id": "input-with-hint-text",
  "name": "test-name-2"
}) }}

Do not disable copy and paste

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

Error messages

Follow:

Research

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

Discuss

Discuss text input on GitHub

Get in touch

If you have a question:

Updated: February 2019