Input

Input

(open in a new window)

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 "input/macro.njk" import govukInput %}

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

Input with hint text

(open in a new window)

Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="input-with-hint-text">
    National insurance number
  </label>
  <span 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’.
  </span>
  <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 "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 in a new window)

Code

Markup

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

Macro

{% 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’."
  },
  "id": "input-with-error-message",
  "name": "test-name-3",
  "errorMessage": {
    "text": "Error message goes here"
  }
}) }}

Input with width-2 class

(open in a new window)

Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="input-width-2">
    National insurance number
  </label>
  <span 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’.
  </span>
  <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 "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 in a new window)

Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="input-width-3">
    National insurance number
  </label>
  <span 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’.
  </span>
  <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 "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 in a new window)

Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="input-width-4">
    National insurance number
  </label>
  <span 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’.
  </span>
  <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 "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 in a new window)

Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="input-width-5">
    National insurance number
  </label>
  <span 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’.
  </span>
  <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 "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 in a new window)

Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="input-width-10">
    National insurance number
  </label>
  <span 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’.
  </span>
  <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 "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 in a new window)

Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="input-width-20">
    National insurance number
  </label>
  <span 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’.
  </span>
  <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 "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 in a new window)

Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="input-width-30">
    National insurance number
  </label>
  <span 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’.
  </span>
  <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 "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 in a new window)

Code

Markup

<div class="govuk-form-group">
  <h1 class="govuk-label-wrapper"><label class="govuk-label" 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 "input/macro.njk" import govukInput %}

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

Input with optional form-group classes

(open in a new window)

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 "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 in a new window)

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 "input/macro.njk" import govukInput %}

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

Input with pattern attribute

(open in a new window)

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 "input/macro.njk" import govukInput %}

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