Ask users for National Insurance numbers

Ask users to provide their National Insurance number.

<div class="govuk-form-group">
  <label class="govuk-label" for="national-insurance-number">
    National Insurance number
  </label>
  <span id="national-insurance-number-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="national-insurance-number" name="national-insurance-number" type="text" aria-describedby="national-insurance-number-hint">
</div>
{% 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’."
  },
  classes: "govuk-input--width-10",
  id: "national-insurance-number",
  name: "national-insurance-number"
}) }}

When to use this pattern

Follow this pattern whenever you need to ask for a National Insurance number.

When not to use this pattern

You shouldn’t use National Insurance numbers to verify a user’s identity.

Find out how to protect your service against fraud if you currently use National Insurance numbers to verify identity.

How it works

Use a single text input labelled ‘National Insurance number’. Write it out in full and don’t use abbreviations such as ‘NINO’ or ‘NI Number’.

You should:

  • allow for 13 characters as National Insurance numbers are spaced in pairs followed by a single letter
  • allow upper and lower case letters and strip out spaces before validating
  • avoid using ‘AB 12 34 56 C’ as an example because it belongs to a real person and use ‘QQ 12 34 56 C’ instead
<div class="govuk-form-group">
  <label class="govuk-label" for="national-insurance-number">
    National Insurance number
  </label>
  <span id="national-insurance-number-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="national-insurance-number" name="national-insurance-number" type="text" aria-describedby="national-insurance-number-hint">
</div>
{% 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’."
  },
  classes: "govuk-input--width-10",
  id: "national-insurance-number",
  name: "national-insurance-number"
}) }}

Error messages

Error messages should be styled like this:

<div class="govuk-form-group govuk-form-group--error">
  <label class="govuk-label" for="national-insurance-number">
    National Insurance number
  </label>
  <span id="national-insurance-number-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="national-insurance-number-error" class="govuk-error-message">
    Enter a National Insurance number in the right format
  </span>
  <input class="govuk-input govuk-input--width-10 govuk-input--error" id="national-insurance-number" name="national-insurance-number" type="text" value="Not a National Insurance number" aria-describedby="national-insurance-number-hint national-insurance-number-error">
</div>
{% 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’."
  },
  classes: "govuk-input--width-10",
  id: "national-insurance-number",
  name: "national-insurance-number",
  value: "Not a National Insurance number",
  errorMessage: {
    text: "Enter a National Insurance number in the right format"
  }
}) }}

Make sure errors follow the guidance in error message and have specific error messages for specific error states.

If the National Insurance number is not in the right format and there is no example

Say “Enter a National Insurance number that is 2 letters, 6 numbers, then A, B, C or D, like QQ123456C”.

If the National Insurance number is not in the right format and there is an example

Say “Enter a National Insurance number in the right format”.

Research on this pattern

If you’ve used this pattern, get in touch to share your user research findings.

Get in touch

If you’ve got a question, idea or suggestion share it in #govuk-design-system on cross-government Slack (open in app) or email the Design System team on govuk-design-system-support@digital.cabinet-office.gov.uk

Discuss ‘National Insurance numbers’ on GitHub