Input examples

• # default

  Open this example in a new tab

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

  
  {% from "govuk/components/input/macro.njk" import govukInput %}
  
  {{ govukInput({
    "label": {
      "text": "National Insurance number"
    },
    "name": "test-name"
  }) }}
          

• # with hint text

  Open this example in a new tab

  It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.

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

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

• # with error message

  Open this example in a new tab

  Enter a National Insurance number in the correct format

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

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

• # with error and hint

  Open this example in a new tab

  It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.

  Enter a National Insurance number in the correct format

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

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

• # with width-2 class

  Open this example in a new tab

  It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.

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

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

• # with width-3 class

  Open this example in a new tab

  It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.

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

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

• # with width-4 class

  Open this example in a new tab

  It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.

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

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

• # with width-5 class

  Open this example in a new tab

  It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.

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

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

• # with width-10 class

  Open this example in a new tab

  It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.

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

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

• # with width-20 class

  Open this example in a new tab

  It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.

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

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

• # with width-30 class

  Open this example in a new tab

  It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.

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

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

• # with label as page heading

  Open this example in a new tab

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

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

• # with prefix

  Open this example in a new tab

  £

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

  
  {% from "govuk/components/input/macro.njk" import govukInput %}
  
  {{ govukInput({
    "label": {
      "text": "Amount, in pounds"
    },
    "id": "input-with-prefix",
    "name": "amount",
    "prefix": {
      "text": "£"
    }
  }) }}
          

• # with suffix

  Open this example in a new tab

  kg

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

  
  {% from "govuk/components/input/macro.njk" import govukInput %}
  
  {{ govukInput({
    "label": {
      "text": "Weight, in kilograms"
    },
    "id": "input-with-suffix",
    "name": "weight",
    "suffix": {
      "text": "kg"
    }
  }) }}
          

• # with prefix and suffix

  Open this example in a new tab

  £

  per item

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

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

• # with prefix and suffix and error

  Open this example in a new tab

  Error message goes here

  £

  per item

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

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

• # with prefix and suffix and width modifier

  Open this example in a new tab

  £

  per item

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

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

• # with extra letter spacing

  Open this example in a new tab

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

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

• # classes

  Open this example in a new tab

  {
    "id": "with-classes",
    "name": "with-classes",
    "label": {
      "text": "With classes"
    },
    "classes": "app-input--custom-modifier"
  }

  
  {% from "govuk/components/input/macro.njk" import govukInput %}
  
  {{ govukInput({
    "id": "with-classes",
    "name": "with-classes",
    "label": {
      "text": "With classes"
    },
    "classes": "app-input--custom-modifier"
  }) }}
          

• # id

  Open this example in a new tab

  {
    "id": "input-id",
    "name": "testing-name",
    "label": {
      "text": "With custom id"
    }
  }

  
  {% from "govuk/components/input/macro.njk" import govukInput %}
  
  {{ govukInput({
    "id": "input-id",
    "name": "testing-name",
    "label": {
      "text": "With custom id"
    }
  }) }}
          

• # custom type

  Open this example in a new tab

  {
    "id": "with-custom-type",
    "name": "with-custom-type",
    "label": {
      "text": "With custom type"
    },
    "type": "number"
  }

  
  {% from "govuk/components/input/macro.njk" import govukInput %}
  
  {{ govukInput({
    "id": "with-custom-type",
    "name": "with-custom-type",
    "label": {
      "text": "With custom type"
    },
    "type": "number"
  }) }}
          

• # value

  Open this example in a new tab

  {
    "id": "with-value",
    "name": "with-value",
    "label": {
      "text": "With value"
    },
    "value": "QQ 12 34 56 C"
  }

  
  {% from "govuk/components/input/macro.njk" import govukInput %}
  
  {{ govukInput({
    "id": "with-value",
    "name": "with-value",
    "label": {
      "text": "With value"
    },
    "value": "QQ 12 34 56 C"
  }) }}
          

• # zero value

  Open this example in a new tab

  {
    "id": "with-zero-value",
    "name": "with-zero-value",
    "label": {
      "text": "With zero value"
    },
    "value": 0
  }

  
  {% from "govuk/components/input/macro.njk" import govukInput %}
  
  {{ govukInput({
    "id": "with-zero-value",
    "name": "with-zero-value",
    "label": {
      "text": "With zero value"
    },
    "value": 0
  }) }}
          

• # with describedBy

  Open this example in a new tab

  {
    "id": "with-describedby",
    "name": "with-describedby",
    "label": {
      "text": "With describedBy"
    },
    "describedBy": "test-target-element"
  }

  
  {% from "govuk/components/input/macro.njk" import govukInput %}
  
  {{ govukInput({
    "id": "with-describedby",
    "name": "with-describedby",
    "label": {
      "text": "With describedBy"
    },
    "describedBy": "test-target-element"
  }) }}
          

• # attributes

  Open this example in a new tab

  {
    "id": "with-attributes",
    "name": "with-attributes",
    "label": {
      "text": "With attributes"
    },
    "attributes": {
      "data-attribute": "my data value"
    }
  }

  
  {% from "govuk/components/input/macro.njk" import govukInput %}
  
  {{ govukInput({
    "id": "with-attributes",
    "name": "with-attributes",
    "label": {
      "text": "With attributes"
    },
    "attributes": {
      "data-attribute": "my data value"
    }
  }) }}
          

• # hint with describedBy

  Open this example in a new tab

  It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.

  {
    "id": "with-hint-describedby",
    "name": "with-hint-describedby",
    "label": {
      "text": "With hint describedBy"
    },
    "describedBy": "test-target-element",
    "hint": {
      "text": "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
    }
  }

  
  {% from "govuk/components/input/macro.njk" import govukInput %}
  
  {{ govukInput({
    "id": "with-hint-describedby",
    "name": "with-hint-describedby",
    "label": {
      "text": "With hint describedBy"
    },
    "describedBy": "test-target-element",
    "hint": {
      "text": "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
    }
  }) }}
          

• # error with describedBy

  Open this example in a new tab

  Error message

  {
    "id": "with-error-describedby",
    "name": "with-error-describedby",
    "label": {
      "text": "With error describedBy"
    },
    "describedBy": "test-target-element",
    "errorMessage": {
      "text": "Error message"
    }
  }

  
  {% from "govuk/components/input/macro.njk" import govukInput %}
  
  {{ govukInput({
    "id": "with-error-describedby",
    "name": "with-error-describedby",
    "label": {
      "text": "With error describedBy"
    },
    "describedBy": "test-target-element",
    "errorMessage": {
      "text": "Error message"
    }
  }) }}
          

• # with error, hint and describedBy

  Open this example in a new tab

  Hint

  Error message

  {
    "id": "with-error-hint-describedby",
    "name": "with-error-hint-describedby",
    "label": {
      "text": "With error, hint and describedBy"
    },
    "errorMessage": {
      "text": "Error message"
    },
    "hint": {
      "text": "Hint"
    },
    "describedBy": "test-target-element"
  }

  
  {% from "govuk/components/input/macro.njk" import govukInput %}
  
  {{ govukInput({
    "id": "with-error-hint-describedby",
    "name": "with-error-hint-describedby",
    "label": {
      "text": "With error, hint and describedBy"
    },
    "errorMessage": {
      "text": "Error message"
    },
    "hint": {
      "text": "Hint"
    },
    "describedBy": "test-target-element"
  }) }}
          

• # inputmode

  Open this example in a new tab

  {
    "id": "with-inputmode",
    "name": "with-inputmode",
    "label": {
      "text": "With inputmode"
    },
    "inputmode": "decimal"
  }

  
  {% from "govuk/components/input/macro.njk" import govukInput %}
  
  {{ govukInput({
    "id": "with-inputmode",
    "name": "with-inputmode",
    "label": {
      "text": "With inputmode"
    },
    "inputmode": "decimal"
  }) }}
          

• # with prefix with html as text

  Open this example in a new tab

  <span>£</span>

  {
    "label": {
      "text": "Amount, in pounds"
    },
    "id": "input-with-prefix",
    "name": "amount",
    "prefix": {
      "text": "<span>£</span>"
    }
  }

  
  {% from "govuk/components/input/macro.njk" import govukInput %}
  
  {{ govukInput({
    "label": {
      "text": "Amount, in pounds"
    },
    "id": "input-with-prefix",
    "name": "amount",
    "prefix": {
      "text": "<span>£</span>"
    }
  }) }}
          

• # with prefix with html

  Open this example in a new tab

  £

  {
    "label": {
      "html": "Amount, in pounds"
    },
    "id": "input-with-prefix",
    "name": "amount",
    "prefix": {
      "html": "<span>£</span>"
    }
  }

  
  {% from "govuk/components/input/macro.njk" import govukInput %}
  
  {{ govukInput({
    "label": {
      "html": "Amount, in pounds"
    },
    "id": "input-with-prefix",
    "name": "amount",
    "prefix": {
      "html": "<span>£</span>"
    }
  }) }}
          

• # with prefix with classes

  Open this example in a new tab

  £

  {
    "label": {
      "text": "Amount, in pounds"
    },
    "id": "input-with-prefix-element",
    "name": "amount",
    "prefix": {
      "text": "£",
      "classes": "app-input__prefix--custom-modifier"
    }
  }

  
  {% from "govuk/components/input/macro.njk" import govukInput %}
  
  {{ govukInput({
    "label": {
      "text": "Amount, in pounds"
    },
    "id": "input-with-prefix-element",
    "name": "amount",
    "prefix": {
      "text": "£",
      "classes": "app-input__prefix--custom-modifier"
    }
  }) }}
          

• # with prefix with attributes

  Open this example in a new tab

  £

  {
    "label": {
      "text": "Amount, in pounds"
    },
    "id": "input-with-prefix-element",
    "name": "amount",
    "prefix": {
      "text": "£",
      "attributes": {
        "data-attribute": "value"
      }
    }
  }

  
  {% from "govuk/components/input/macro.njk" import govukInput %}
  
  {{ govukInput({
    "label": {
      "text": "Amount, in pounds"
    },
    "id": "input-with-prefix-element",
    "name": "amount",
    "prefix": {
      "text": "£",
      "attributes": {
        "data-attribute": "value"
      }
    }
  }) }}
          

• # with suffix with html as text

  Open this example in a new tab

  <span>kg</span>

  {
    "label": {
      "text": "Weight, in kilograms"
    },
    "id": "input-with-suffix",
    "name": "weight",
    "suffix": {
      "text": "<span>kg</span>"
    }
  }

  
  {% from "govuk/components/input/macro.njk" import govukInput %}
  
  {{ govukInput({
    "label": {
      "text": "Weight, in kilograms"
    },
    "id": "input-with-suffix",
    "name": "weight",
    "suffix": {
      "text": "<span>kg</span>"
    }
  }) }}
          

• # with suffix with html

  Open this example in a new tab

  kg

  {
    "label": {
      "text": "Weight, in kilograms"
    },
    "id": "input-with-suffix",
    "name": "weight",
    "suffix": {
      "html": "<span>kg</span>"
    }
  }

  
  {% from "govuk/components/input/macro.njk" import govukInput %}
  
  {{ govukInput({
    "label": {
      "text": "Weight, in kilograms"
    },
    "id": "input-with-suffix",
    "name": "weight",
    "suffix": {
      "html": "<span>kg</span>"
    }
  }) }}
          

• # with suffix with classes

  Open this example in a new tab

  kg

  {
    "label": {
      "text": "Weight, in kilograms"
    },
    "id": "input-with-suffix",
    "name": "weight",
    "suffix": {
      "html": "<span>kg</span>",
      "classes": "app-input__suffix--custom-modifier"
    }
  }

  
  {% from "govuk/components/input/macro.njk" import govukInput %}
  
  {{ govukInput({
    "label": {
      "text": "Weight, in kilograms"
    },
    "id": "input-with-suffix",
    "name": "weight",
    "suffix": {
      "html": "<span>kg</span>",
      "classes": "app-input__suffix--custom-modifier"
    }
  }) }}
          

• # with suffix with attributes

  Open this example in a new tab

  kg

  {
    "label": {
      "text": "Weight, in kilograms"
    },
    "id": "input-with-suffix",
    "name": "weight",
    "suffix": {
      "html": "<span>kg</span>",
      "attributes": {
        "data-attribute": "value"
      }
    }
  }

  
  {% from "govuk/components/input/macro.njk" import govukInput %}
  
  {{ govukInput({
    "label": {
      "text": "Weight, in kilograms"
    },
    "id": "input-with-suffix",
    "name": "weight",
    "suffix": {
      "html": "<span>kg</span>",
      "attributes": {
        "data-attribute": "value"
      }
    }
  }) }}
          

• # with customised input wrapper

  Open this example in a new tab

  £

  per item

  {
    "label": {
      "text": "Cost per item, in pounds"
    },
    "id": "input-with-customised-input-wrapper",
    "name": "cost",
    "inputWrapper": {
      "classes": "app-input-wrapper--custom-modifier",
      "attributes": {
        "data-attribute": "value"
      }
    },
    "prefix": {
      "text": "£"
    },
    "suffix": {
      "text": "per item"
    }
  }

  
  {% from "govuk/components/input/macro.njk" import govukInput %}
  
  {{ govukInput({
    "label": {
      "text": "Cost per item, in pounds"
    },
    "id": "input-with-customised-input-wrapper",
    "name": "cost",
    "inputWrapper": {
      "classes": "app-input-wrapper--custom-modifier",
      "attributes": {
        "data-attribute": "value"
      }
    },
    "prefix": {
      "text": "£"
    },
    "suffix": {
      "text": "per item"
    }
  }) }}
          

• # with optional form-group classes

  Open this example in a new tab

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

  
  {% from "govuk/components/input/macro.njk" import govukInput %}
  
  {{ govukInput({
    "label": {
      "text": "National Insurance number"
    },
    "id": "input-example",
    "name": "test-name",
    "formGroup": {
      "classes": "extra-class"
    }
  }) }}
          

• # with autocomplete attribute

  Open this example in a new tab

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

  
  {% from "govuk/components/input/macro.njk" import govukInput %}
  
  {{ govukInput({
    "label": {
      "text": "Postcode"
    },
    "id": "input-with-autocomplete-attribute",
    "name": "postcode",
    "autocomplete": "postal-code"
  }) }}
          

• # with pattern attribute

  Open this example in a new tab

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

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

• # with spellcheck enabled

  Open this example in a new tab

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

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

• # with spellcheck disabled

  Open this example in a new tab

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

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

• # with autocapitalize turned off

  Open this example in a new tab

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

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

• # disabled

  Open this example in a new tab

  {
    "label": {
      "text": "Disabled input"
    },
    "id": "disabled-input",
    "disabled": true
  }

  
  {% from "govuk/components/input/macro.njk" import govukInput %}
  
  {{ govukInput({
    "label": {
      "text": "Disabled input"
    },
    "id": "disabled-input",
    "disabled": true
  }) }}