This is an internal development app.
To learn how to use the GOV.UK Design System in your project, see Get started.

Skip to main content
  1. GOV.UK Frontend
  2. All components
  3. Input

Input

Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="input-example">
    National Insurance number
  </label>
  <input class="govuk-input" id="input-example" name="test-name" type="text">
</div>

Macro

{% from "govuk/components/input/macro.njk" import govukInput %}

{{ govukInput({
  label: {
    text: "National Insurance number"
  },
  id: "input-example",
  name: "test-name"
}) }}
Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="input-with-hint-text">
    National insurance number
  </label>
  <div id="input-with-hint-text-hint" class="govuk-hint">
    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
  </div>
  <input class="govuk-input" id="input-with-hint-text" name="test-name-2" type="text" aria-describedby="input-with-hint-text-hint">
</div>

Macro

{% from "govuk/components/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’."
  },
  id: "input-with-hint-text",
  name: "test-name-2"
}) }}
Code

Markup

<div class="govuk-form-group govuk-form-group--error">
  <label class="govuk-label" for="input-with-error-message">
    National Insurance number
  </label>
  <p id="input-with-error-message-error" class="govuk-error-message">
    <span class="govuk-visually-hidden">Error:</span> Enter a National Insurance number in the correct format
  </p>
  <input class="govuk-input govuk-input--error" id="input-with-error-message" name="test-name-3" type="text" aria-describedby="input-with-error-message-error">
</div>

Macro

{% from "govuk/components/input/macro.njk" import govukInput %}

{{ govukInput({
  label: {
    text: "National Insurance number"
  },
  id: "input-with-error-message",
  name: "test-name-3",
  errorMessage: {
    text: "Enter a National Insurance number in the correct format"
  }
}) }}
Code

Markup

<div class="govuk-form-group govuk-form-group--error">
  <label class="govuk-label" for="with-error-hint">
    National insurance number
  </label>
  <div id="with-error-hint-hint" class="govuk-hint">
    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
  </div>
  <p id="with-error-hint-error" class="govuk-error-message">
    <span class="govuk-visually-hidden">Error:</span> Enter a National Insurance number in the correct format
  </p>
  <input class="govuk-input govuk-input--error" id="with-error-hint" name="with-error-hint" type="text" aria-describedby="with-error-hint-hint with-error-hint-error">
</div>

Macro

{% from "govuk/components/input/macro.njk" import govukInput %}

{{ govukInput({
  id: "with-error-hint",
  name: "with-error-hint",
  label: {
    text: "National insurance number"
  },
  errorMessage: {
    text: "Enter a National Insurance number in the correct format"
  },
  hint: {
    text: "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
  }
}) }}
Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="input-width-2">
    National insurance number
  </label>
  <div id="input-width-2-hint" class="govuk-hint">
    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
  </div>
  <input class="govuk-input govuk-input--width-2" id="input-width-2" name="test-width-2" type="text" aria-describedby="input-width-2-hint">
</div>

Macro

{% from "govuk/components/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’."
  },
  id: "input-width-2",
  name: "test-width-2",
  classes: "govuk-input--width-2"
}) }}
Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="input-width-3">
    National insurance number
  </label>
  <div id="input-width-3-hint" class="govuk-hint">
    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
  </div>
  <input class="govuk-input govuk-input--width-3" id="input-width-3" name="test-width-3" type="text" aria-describedby="input-width-3-hint">
</div>

Macro

{% from "govuk/components/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’."
  },
  id: "input-width-3",
  name: "test-width-3",
  classes: "govuk-input--width-3"
}) }}
Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="input-width-4">
    National insurance number
  </label>
  <div id="input-width-4-hint" class="govuk-hint">
    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
  </div>
  <input class="govuk-input govuk-input--width-4" id="input-width-4" name="test-width-4" type="text" aria-describedby="input-width-4-hint">
</div>

Macro

{% from "govuk/components/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’."
  },
  id: "input-width-4",
  name: "test-width-4",
  classes: "govuk-input--width-4"
}) }}
Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="input-width-5">
    National insurance number
  </label>
  <div id="input-width-5-hint" class="govuk-hint">
    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
  </div>
  <input class="govuk-input govuk-input--width-5" id="input-width-5" name="test-width-5" type="text" aria-describedby="input-width-5-hint">
</div>

Macro

{% from "govuk/components/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’."
  },
  id: "input-width-5",
  name: "test-width-5",
  classes: "govuk-input--width-5"
}) }}
Code

Markup

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

Macro

{% from "govuk/components/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’."
  },
  id: "input-width-10",
  name: "test-width-10",
  classes: "govuk-input--width-10"
}) }}
Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="input-width-20">
    National insurance number
  </label>
  <div id="input-width-20-hint" class="govuk-hint">
    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
  </div>
  <input class="govuk-input govuk-input--width-20" id="input-width-20" name="test-width-20" type="text" aria-describedby="input-width-20-hint">
</div>

Macro

{% from "govuk/components/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’."
  },
  id: "input-width-20",
  name: "test-width-20",
  classes: "govuk-input--width-20"
}) }}
Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="input-width-30">
    National insurance number
  </label>
  <div id="input-width-30-hint" class="govuk-hint">
    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
  </div>
  <input class="govuk-input govuk-input--width-30" id="input-width-30" name="test-width-30" type="text" aria-describedby="input-width-30-hint">
</div>

Macro

{% from "govuk/components/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’."
  },
  id: "input-width-30",
  name: "test-width-30",
  classes: "govuk-input--width-30"
}) }}
Code

Markup

<div class="govuk-form-group">
  <h1 class="govuk-label-wrapper">
    <label class="govuk-label govuk-label--l" for="input-with-page-heading">
      National Insurance number
    </label>
  </h1>
  <input class="govuk-input" id="input-with-page-heading" name="test-name" type="text">
</div>

Macro

{% from "govuk/components/input/macro.njk" import govukInput %}

{{ govukInput({
  label: {
    text: "National Insurance number",
    classes: "govuk-label--l",
    isPageHeading: true
  },
  id: "input-with-page-heading",
  name: "test-name"
}) }}
Code

Markup

<div class="govuk-form-group extra-class">
  <label class="govuk-label" for="input-example">
    National Insurance number
  </label>
  <input class="govuk-input" id="input-example" name="test-name" type="text">
</div>

Macro

{% from "govuk/components/input/macro.njk" import govukInput %}

{{ govukInput({
  label: {
    text: "National Insurance number"
  },
  id: "input-example",
  name: "test-name",
  formGroup: {
    classes: "extra-class"
  }
}) }}
Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="input-with-autocomplete-attribute">
    Postcode
  </label>
  <input class="govuk-input" id="input-with-autocomplete-attribute" name="postcode" type="text" autocomplete="postal-code">
</div>

Macro

{% from "govuk/components/input/macro.njk" import govukInput %}

{{ govukInput({
  label: {
    text: "Postcode"
  },
  id: "input-with-autocomplete-attribute",
  name: "postcode",
  autocomplete: "postal-code"
}) }}
Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="input-with-pattern-attribute">
    Numbers only
  </label>
  <input class="govuk-input" id="input-with-pattern-attribute" name="numbers-only" type="number" pattern="[0-9]*">
</div>

Macro

{% from "govuk/components/input/macro.njk" import govukInput %}

{{ govukInput({
  label: {
    text: "Numbers only"
  },
  id: "input-with-pattern-attribute",
  name: "numbers-only",
  type: "number",
  pattern: "[0-9]*"
}) }}
Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="input-with-spellcheck-enabled">
    Spellcheck is enabled
  </label>
  <input class="govuk-input" id="input-with-spellcheck-enabled" name="spellcheck" type="text" spellcheck="true">
</div>

Macro

{% from "govuk/components/input/macro.njk" import govukInput %}

{{ govukInput({
  label: {
    text: "Spellcheck is enabled"
  },
  id: "input-with-spellcheck-enabled",
  name: "spellcheck",
  type: "text",
  spellcheck: true
}) }}
Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="input-with-spellcheck-disabled">
    Spellcheck is disabled
  </label>
  <input class="govuk-input" id="input-with-spellcheck-disabled" name="spellcheck" type="text" spellcheck="false">
</div>

Macro

{% from "govuk/components/input/macro.njk" import govukInput %}

{{ govukInput({
  label: {
    text: "Spellcheck is disabled"
  },
  id: "input-with-spellcheck-disabled",
  name: "spellcheck",
  type: "text",
  spellcheck: false
}) }}
Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="input-with-autocapitalize-off">
    Autocapitalize is turned off
  </label>
  <input class="govuk-input" id="input-with-autocapitalize-off" name="autocapitalize" type="text" autocapitalize="none">
</div>

Macro

{% from "govuk/components/input/macro.njk" import govukInput %}

{{ govukInput({
  label: {
    text: "Autocapitalize is turned off"
  },
  id: "input-with-autocapitalize-off",
  name: "autocapitalize",
  type: "text",
  autocapitalize: "none"
}) }}
Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="disabled-input">
    Disabled input
  </label>
  <input class="govuk-input" id="disabled-input" name="" type="text" disabled>
</div>

Macro

{% from "govuk/components/input/macro.njk" import govukInput %}

{{ govukInput({
  label: {
    text: "Disabled input"
  },
  id: "disabled-input",
  disabled: true
}) }}
Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="input-with-prefix">
    Amount, in pounds
  </label>
  <div class="govuk-input__wrapper">
    <div class="govuk-input__prefix" aria-hidden="true">£</div>
    <input class="govuk-input" id="input-with-prefix" name="amount" type="text">
  </div>
</div>

Macro

{% from "govuk/components/input/macro.njk" import govukInput %}

{{ govukInput({
  label: {
    text: "Amount, in pounds"
  },
  id: "input-with-prefix",
  name: "amount",
  prefix: {
    text: "£"
  }
}) }}
Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="input-with-suffix">
    Weight, in kilograms
  </label>
  <div class="govuk-input__wrapper">
    <input class="govuk-input" id="input-with-suffix" name="weight" type="text">
    <div class="govuk-input__suffix" aria-hidden="true">kg</div>
  </div>
</div>

Macro

{% from "govuk/components/input/macro.njk" import govukInput %}

{{ govukInput({
  label: {
    text: "Weight, in kilograms"
  },
  id: "input-with-suffix",
  name: "weight",
  suffix: {
    text: "kg"
  }
}) }}
Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="input-with-prefix-suffix">
    Cost per item, in pounds
  </label>
  <div class="govuk-input__wrapper">
    <div class="govuk-input__prefix" aria-hidden="true">£</div>
    <input class="govuk-input" id="input-with-prefix-suffix" name="cost" type="text">
    <div class="govuk-input__suffix" aria-hidden="true">per item</div>
  </div>
</div>

Macro

{% from "govuk/components/input/macro.njk" import govukInput %}

{{ govukInput({
  label: {
    text: "Cost per item, in pounds"
  },
  id: "input-with-prefix-suffix",
  name: "cost",
  prefix: {
    text: "£"
  },
  suffix: {
    text: "per item"
  }
}) }}
Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="input-with-prefix-suffix">
    Cost per item, in pounds, per household member
  </label>
  <div class="govuk-input__wrapper">
    <div class="govuk-input__prefix" aria-hidden="true">£</div>
    <input class="govuk-input" id="input-with-prefix-suffix" name="cost" type="text">
    <div class="govuk-input__suffix" aria-hidden="true">per household member</div>
  </div>
</div>

Macro

{% from "govuk/components/input/macro.njk" import govukInput %}

{{ govukInput({
  label: {
    text: "Cost per item, in pounds, per household member"
  },
  id: "input-with-prefix-suffix",
  name: "cost",
  prefix: {
    text: "£"
  },
  suffix: {
    text: "per household member"
  }
}) }}
Code

Markup

<div class="govuk-form-group govuk-form-group--error">
  <label class="govuk-label" for="input-with-prefix-suffix">
    Cost per item, in pounds
  </label>
  <p id="input-with-prefix-suffix-error" class="govuk-error-message">
    <span class="govuk-visually-hidden">Error:</span> Error message goes here
  </p>
  <div class="govuk-input__wrapper">
    <div class="govuk-input__prefix" aria-hidden="true">£</div>
    <input class="govuk-input govuk-input--error" id="input-with-prefix-suffix" name="cost" type="text" aria-describedby="input-with-prefix-suffix-error">
    <div class="govuk-input__suffix" aria-hidden="true">per item</div>
  </div>
</div>

Macro

{% from "govuk/components/input/macro.njk" import govukInput %}

{{ govukInput({
  label: {
    text: "Cost per item, in pounds"
  },
  id: "input-with-prefix-suffix",
  name: "cost",
  prefix: {
    text: "£"
  },
  suffix: {
    text: "per item"
  },
  errorMessage: {
    text: "Error message goes here"
  }
}) }}
Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="input-with-prefix-suffix">
    Cost per item, in pounds
  </label>
  <div class="govuk-input__wrapper">
    <div class="govuk-input__prefix" aria-hidden="true">£</div>
    <input class="govuk-input govuk-input--width-5" id="input-with-prefix-suffix" name="cost" type="text">
    <div class="govuk-input__suffix" aria-hidden="true">per item</div>
  </div>
</div>

Macro

{% from "govuk/components/input/macro.njk" import govukInput %}

{{ govukInput({
  label: {
    text: "Cost per item, in pounds"
  },
  id: "input-with-prefix-suffix",
  name: "cost",
  classes: "govuk-input--width-5",
  prefix: {
    text: "£"
  },
  suffix: {
    text: "per item"
  }
}) }}
Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="input-with-extra-letter-spacing">
    National insurance number
  </label>
  <input class="govuk-input govuk-input--width-30 govuk-input--extra-letter-spacing" id="input-with-extra-letter-spacing" name="" type="text" value="QQ 12 34 56 C">
</div>

Macro

{% from "govuk/components/input/macro.njk" import govukInput %}

{{ govukInput({
  id: "input-with-extra-letter-spacing",
  label: {
    text: "National insurance number"
  },
  classes: "govuk-input--width-30 govuk-input--extra-letter-spacing",
  value: "QQ 12 34 56 C"
}) }}