Components

Text input

<div class="govuk-form-group">
  <label class="govuk-label" for="email">
    Email address
  </label>
  <span id="email-hint" class="govuk-hint">
    We’ll only use this to send you a receipt
  </span>
  <input class="govuk-input" id="email" name="email" type="text" aria-describedby="email-hint">
</div>
{% from "input/macro.njk" import govukInput %}

{{ govukInput({
  label: {
    text: "Email address"
  },
  hint: {
    text: "We’ll only use this to send you a receipt"
  },
  id: "email",
  name: "email"
}) }}

You can configure this component using the Nunjucks macro arguments.

When to use this component

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

When not to use this component

Don’t use the text input component if you need to let users enter longer answers that might span multiple lines. In this case, you should use the textarea component.

How it works

There are 2 ways to use the text input component. You can use HTML or, if you’re using Nunjucks or the GOV.UK Prototype Kit, you can use the Nunjucks macro.

<div class="govuk-form-group">
  <label class="govuk-label" for="email">
    Email address
  </label>
  <span id="email-hint" class="govuk-hint">
    We’ll only use this to send you a receipt
  </span>
  <input class="govuk-input" id="email" name="email" type="text" aria-describedby="email-hint">
</div>
{% from "input/macro.njk" import govukInput %}

{{ govukInput({
  label: {
    text: "Email address"
  },
  hint: {
    text: "We’ll only use this to send you a receipt"
  },
  id: "email",
  name: "email"
}) }}

You can configure this component using the Nunjucks macro arguments.

Label text inputs

All text inputs must have visible labels; placeholder text is not an acceptable replacement for a label as it vanishes when users click on the text input.

Labels should be aligned above the text input they refer to. They should be short, direct and written in sentence case. Don’t use colons at the end of labels.

If you’re asking just one question per page as recommended, you can set the contents of the <label> as the page heading. This is good practice as it means that users of screen readers will only hear the contents once.

Read more about why and how to set legends as headings.

Use appropriately-sized text inputs

Help users understand what they should enter by making text inputs the right size for the content they’re intended for.

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. Postcode inputs should be postcode-sized, 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.

<div class="govuk-form-group">
  <label class="govuk-label" for="width-20">
    20 character width
  </label>
  <input class="govuk-input govuk-input--width-20" id="width-20" name="width-20" type="text">
</div>

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

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

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

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

<div class="govuk-form-group">
  <label class="govuk-label" for="width-2">
    2 character width
  </label>
  <input class="govuk-input govuk-input--width-2" id="width-2" name="width-2" type="text">
</div>
{% from "input/macro.njk" import govukInput %}

{{ govukInput({
  label: {
    text: "20 character width"
  },
  classes: "govuk-input--width-20",
  id: "width-20",
  name: "width-20"
}) }}

{{ govukInput({
  label: {
    text: "10 character width"
  },
  classes: "govuk-input--width-10",
  id: "width-10",
  name: "width-10"
}) }}

{{ govukInput({
  label: {
    text: "5 character width"
  },
  classes: "govuk-input--width-5",
  id: "width-5",
  name: "width-5"
}) }}

{{ govukInput({
  label: {
    text: "4 character width"
  },
  classes: "govuk-input--width-4",
  id: "width-4",
  name: "width-4"
}) }}

{{ govukInput({
  label: {
    text: "3 character width"
  },
  classes: "govuk-input--width-3",
  id: "width-3",
  name: "width-3"
}) }}

{{ govukInput({
  label: {
    text: "2 character width"
  },
  classes: "govuk-input--width-2",
  id: "width-2",
  name: "width-2"
}) }}

You can configure this component using the Nunjucks macro arguments.

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="govuk-form-group">
  <label class="govuk-label govuk-!-width-three-quarters" for="three-quarters">
    Three-quarters width
  </label>
  <input class="govuk-input govuk-!-width-three-quarters" id="three-quarters" name="three-quarters" type="text">
</div>

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

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

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

<div class="govuk-form-group">
  <label class="govuk-label govuk-!-width-one-quarter" for="one-quarter">
    One-quarter width
  </label>
  <input class="govuk-input govuk-!-width-one-quarter" id="one-quarter" name="one-quarter" type="text">
</div>
{% from "input/macro.njk" import govukInput %}

{{ govukInput({
  label: {
    text: "Three-quarters width",
    classes: "govuk-!-width-three-quarters"
  },
  classes: "govuk-!-width-three-quarters",
  id: "three-quarters",
  name: "three-quarters"
}) }}

{{ govukInput({
  label: {
    text: "Two-thirds width",
    classes: "govuk-!-width-two-thirds"
  },
  classes: "govuk-!-width-two-thirds",
  id: "two-thirds",
  name: "two-thirds"
}) }}

{{ govukInput({
  label: {
    text: "One-half width",
    classes: "govuk-!-width-one-half"
  },
  classes: "govuk-!-width-one-half",
  id: "one-half",
  name: "one-half"
}) }}

{{ govukInput({
  label: {
    text: "One-third width",
    classes: "govuk-!-width-one-third"
  },
  classes: "govuk-!-width-one-third",
  id: "one-third",
  name: "one-third"
}) }}

{{ govukInput({
  label: {
    text: "One-quarter width",
    classes: "govuk-!-width-one-quarter"
  },
  classes: "govuk-!-width-one-quarter",
  id: "one-quarter",
  name: "one-quarter"
}) }}

You can configure this component using the Nunjucks macro arguments.

Using hint text

Use hint for help that’s relevant to the majority of users - like how their information will be used, or where to find it.

<div class="govuk-form-group">
  <label class="govuk-label" for="national-insurance-number">
    National insurance number
  </label>
  <span id="national-insurance-number-hint" class="govuk-hint">
    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
  </span>
  <input class="govuk-input govuk-input--width-10" id="national-insurance-number" name="national-insurance-number" type="text" aria-describedby="national-insurance-number-hint">
</div>
{% from "input/macro.njk" import govukInput %}

{{ govukInput({
  label: {
    text: "National insurance number"
  },
  hint: {
    text: "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
  },
  classes: "govuk-input--width-10",
  id: "national-insurance-number",
  name: "national-insurance-number"
}) }}

You can configure this component using the Nunjucks macro arguments.

Don’t disable copy and paste

Users often need to copy and paste information into a text input, so you shouldn’t prevent them from doing this.

Research on this component

If you’ve used this component, get in touch to share your user research findings.

Get in touch

If you’ve got a question, idea or suggestion share it in #govuk-design-system on cross-government Slack (open in app) or email the Design System team on govuk-design-system-support@digital.cabinet-office.gov.uk

Discuss ‘Text input’ on GitHub