Ask users for... National Insurance numbers

Ask users to provide their National Insurance number.

Open this "National insurance numbers" example in a new window
HTML
<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>
Nunjucks
{% 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
Open this "National insurance numbers" example in a new window
HTML
<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>
Nunjucks
{% 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"
}) }}

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

Discuss ‘National Insurance numbers’ on GitHub