Ask users for National Insurance numbers

This guidance is for government teams that build online services. To find information and services for the public, go to GOV.UK.

Ask users to provide their National Insurance number.

<div class="app-example app-example--tabs">
  <div class="app-example__toolbar">
    <a href="/patterns/national-insurance-numbers/default/index.html" class="app-example__new-window" target="_blank">
      Open this
      <span class="govuk-visually-hidden">national insurance numbers</span>
      example in a new tab
    </a>
  </div>
  <iframe title="National Insurance numbers example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/patterns/national-insurance-numbers/default/index.html" frameBorder="0" loading="lazy"></iframe>
</div>

<span id="options-national-insurance-numbers-example"></span>
<ul class="app-tabs" role="tablist">
  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#national-insurance-numbers-example-html" role="tab" aria-controls="national-insurance-numbers-example-html" data-track="tab-html">HTML</a></li>
  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#national-insurance-numbers-example-nunjucks" role="tab" aria-controls="national-insurance-numbers-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
</ul>

  <div class="app-tabs__heading js-tabs__heading"><a href="#national-insurance-numbers-example-html" aria-controls="national-insurance-numbers-example-html" data-track="tab-html">HTML</a></div>

<div class="app-tabs__container js-tabs__container" id="national-insurance-numbers-example-html" role="tabpanel">
  <div class="app-example__code">
    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>

<label class="govuk-label" for="national-insurance-number"> National Insurance number </label> <div 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’. </div> <input class="govuk-input govuk-input--width-10" id="national-insurance-number" name="national-insurance-number" type="text" spellcheck="false" aria-describedby="national-insurance-number-hint"> </div> 

  <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#national-insurance-numbers-example-nunjucks" aria-controls="national-insurance-numbers-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div>
<div class="app-tabs__container js-tabs__container" id="national-insurance-numbers-example-nunjucks" role="tabpanel"><div class="app-example__code">
    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/input/macro.njk&quot;</span> <span class="hljs-keyword">import</span> 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", spellcheck: false }) }}