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

Feature flags

Feature flag control

This is an experimental feature for turning the 'rebrand' feature flag on and off only.

Show all flag states

Skip to main content

Input

Input

Open this example in a new tab: Inputoff

Code

Markup

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

Macro

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

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

Input with hint text

Open this example in a new tab: Input with hint textoff

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"
}) }}

Input with error message

Open this example in a new tab: Input with error messageoff

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"
  }
}) }}

Input with error and hint

Open this example in a new tab: Input with error and hintoff

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’."
  }
}) }}

Input with width-2 class

Open this example in a new tab: Input with width-2 classoff

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"
}) }}

Input with width-3 class

Open this example in a new tab: Input with width-3 classoff

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"
}) }}

Input with width-4 class

Open this example in a new tab: Input with width-4 classoff

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"
}) }}

Input with width-5 class

Open this example in a new tab: Input with width-5 classoff

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"
}) }}

Input with width-10 class

Open this example in a new tab: Input with width-10 classoff

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"
}) }}

Input with width-20 class

Open this example in a new tab: Input with width-20 classoff

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"
}) }}

Input with width-30 class

Open this example in a new tab: Input with width-30 classoff

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"
}) }}

Input with label as page heading

Open this example in a new tab: Input with label as page headingoff

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"
}) }}

Input with optional form-group classes

Open this example in a new tab: Input with optional form-group classesoff

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"
  }
}) }}

Input with autocomplete attribute

Open this example in a new tab: Input with autocomplete attributeoff

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"
}) }}

Input with pattern attribute

Open this example in a new tab: Input with pattern attributeoff

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]*"
}) }}

Input with spellcheck enabled

Open this example in a new tab: Input with spellcheck enabledoff

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
}) }}

Input with spellcheck disabled

Open this example in a new tab: Input with spellcheck disabledoff

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
}) }}

Input with autocapitalize turned off

Open this example in a new tab: Input with autocapitalize turned offoff

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"
}) }}

Input disabled

Open this example in a new tab: Input disabledoff

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
}) }}

Input with prefix

Open this example in a new tab: Input with prefixoff

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: "£"
  }
}) }}

Input with suffix

Open this example in a new tab: Input with suffixoff

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"
  }
}) }}

Input with prefix and suffix

Open this example in a new tab: Input with prefix and suffixoff

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"
  }
}) }}

Input with prefix and long suffix

Open this example in a new tab: Input with prefix and long suffixoff

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"
  }
}) }}

Input with prefix and suffix and error

Open this example in a new tab: Input with prefix and suffix and erroroff

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"
  }
}) }}

Input with prefix and suffix and width modifier

Open this example in a new tab: Input with prefix and suffix and width modifieroff

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"
  }
}) }}

Input with extra letter spacing

Open this example in a new tab: Input with extra letter spacingoff

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"
}) }}