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

Input

Input 📸

Open this example in a new tab: Input, rebrand flag off

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 text, rebrand flag off

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 message, rebrand flag off

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 hint, rebrand flag off

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 class, rebrand flag off

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 class, rebrand flag off

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 class, rebrand flag off

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 class, rebrand flag off

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 class, rebrand flag off

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 class, rebrand flag off

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 class, rebrand flag off

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 heading, rebrand flag off

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 prefix

Open this example in a new tab: Input with prefix, rebrand flag off

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 suffix, rebrand flag off

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 suffix, rebrand flag off

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 suffix and error

Open this example in a new tab: Input with prefix and suffix and error, rebrand flag off

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 modifier, rebrand flag off

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 spacing, rebrand flag off

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