Tasks - Ask users for their NHS number

Use this pattern to ask people for their NHS number and help them find it.

When to use the NHS number pattern

Follow this pattern whenever you need to ask for an NHS number.

Only ask for an NHS number if 1 of these applies:

  • your service needs it
  • the user is more likely to succeed on their journey if they can give you an NHS number

When not to use the NHS number pattern

If users are more likely to succeed by providing other details rather than the NHS number, do not use this pattern.

Users do not need to know their NHS number to get care. This means that most people do not know their number.

How to use the NHS number pattern

There are 3 ways of asking users for their NHS number:

  • single text input
  • filter question before input
  • filter question before input with a 3rd option

Single text input

Use a single text input if the only way users can get the service is by entering their NHS number.

However, we recommend you avoid building a service that requires users to enter their NHS number. If possible, always try to give users an alternative way to continue with their journey, and use 1 of the other ways of asking for an NHS number on this page instead.

Open this default ask users for their nhs number example in new window
Copy default ask users for their nhs number code 
<div class="nhsuk-width-container">

  <main class="nhsuk-main-wrapper" id="maincontent" role="main">

    <div class="nhsuk-grid-row">
      <div class="nhsuk-grid-column-two-thirds">

        <div class="nhsuk-form-group">
          <h1 class="nhsuk-label-wrapper">
            <label class="nhsuk-label nhsuk-label--l" for="nhs-number">
              What is your NHS number?
            </label>
          </h1>
          <div class="nhsuk-hint" id="nhs-number-hint">
            Your NHS number is a 10 digit number that you find on any letter the NHS has sent you. For example, <span class="nhsuk-u-nowrap">485 777 3456</span>.
          </div>
          <input class="nhsuk-input nhsuk-input--width-10" id="nhs-number" name="nhs-number" type="text" aria-describedby="nhs-number-hint" inputmode="numeric">
        </div>

        <button class="nhsuk-button" data-module="nhsuk-button" type="submit">
          Continue
        </button>

      </div>
    </div>

  </main>
</div>
Close default ask users for their nhs number code
Copy default ask users for their nhs number code 
{% from 'input/macro.njk' import input %}
{% from 'button/macro.njk' import button %}

{% block content %}
  <div class="nhsuk-grid-row">
    <div class="nhsuk-grid-column-two-thirds">

      {{ input({
        label: {
          text: "What is your NHS number?",
          classes: "nhsuk-label--l",
          isPageHeading: true
        },
        hint: {
          html: "Your NHS number is a 10 digit number that you find on any letter the NHS has sent you. For example, <span class=\"nhsuk-u-nowrap\">485 777 3456</span>."
        },
        id: "nhs-number",
        name: "nhs-number",
        classes: "nhsuk-input--width-10",
        inputmode: "numeric"
      }) }}

      {{ button({
        "text": "Continue"
      }) }}

    </div>
  </div>
{% endblock %}
Close default ask users for their nhs number code

If you have no other option and must use a single text input:

  • label it "What is your NHS number?" or "Enter your NHS number"
  • help users recognise their NHS number and know the correct details to enter, for example, with hint text
  • tell users where they can find their NHS number before they start the service, as well as during the journey

Filter question before single text input

Use a filter question before a single text input if there is another way for users to continue without an NHS number.

Use a 2-option radio button that asks the user if they know their NHS number.

Open this filter ask users for their nhs number example in new window
Copy filter ask users for their nhs number code 
<div class="nhsuk-width-container">

  <main class="nhsuk-main-wrapper" id="maincontent" role="main">

    <div class="nhsuk-grid-row">
      <div class="nhsuk-grid-column-two-thirds">

        <fieldset class="nhsuk-fieldset">
          <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
            Do you know your NHS number?
          </legend>

          <div class="nhsuk-hint nhsuk-u-margin-bottom-2">
            Your NHS number is a 10 digit number, like <span class="nhsuk-u-nowrap">485 777 3456</span>.
          </div>

          <div class="nhsuk-hint">
            You can find it on any letter the NHS has sent you, on a prescription, or by logging in to a GP practice online service.
          </div>

          <div class="nhsuk-form-group">

            <div class="nhsuk-radios">

              <div class="nhsuk-radios__item">
                <input class="nhsuk-radios__input" id="nhs-number-1" name="nhs-number" type="radio" value="yes">
                <label class="nhsuk-label nhsuk-radios__label" for="nhs-number-1">
                  Yes, I know my NHS number
                </label>
              </div>

              <div class="nhsuk-radios__item">
                <input class="nhsuk-radios__input" id="nhs-number-2" name="nhs-number" type="radio" value="no">
                <label class="nhsuk-label nhsuk-radios__label" for="nhs-number-2">
                  No, I do not know my NHS number
                </label>
              </div>

            </div>
          </div>

          <button class="nhsuk-button" data-module="nhsuk-button" type="submit">
            Continue
          </button>

        </fieldset>

      </div>
    </div>

  </main>
</div>
Close filter ask users for their nhs number code
Copy filter ask users for their nhs number code 
{% from 'button/macro.njk' import button %}
{% from 'hint/macro.njk' import hint %}
{% from 'fieldset/macro.njk' import fieldset %}
{% from 'radios/macro.njk' import radios %}

{% block content %}
  <div class="nhsuk-grid-row">
    <div class="nhsuk-grid-column-two-thirds">

      {% call fieldset({
        legend: {
          "text": "Do you know your NHS number?",
          "classes": "nhsuk-fieldset__legend--l"
        }
        }) %}
        {{ hint({
          "html": "Your NHS number is a 10 digit number, like <span class=\"nhsuk-u-nowrap\">485 777 3456</span>.",
          "classes": "nhsuk-u-margin-bottom-2"
        }) }}
        {{ hint({
          "text": "You can find it on any letter the NHS has sent you, on a prescription, or by logging in to a GP practice online service."
        }) }}
        {{ radios({
          "idPrefix": "nhs-number",
          "name": "nhs-number",
          "items": [
          {
            "value": "yes",
            "text": "Yes, I know my NHS number"
          },
          {
            "value": "no",
            "text": "No, I do not know my NHS number"
          }
        ]
        }) }}
        {{ button({
          "text": "Continue"
        }) }}
      {% endcall %}

    </div>
  </div>
{% endblock %}
Close filter ask users for their nhs number code

If users do know their NHS number, route them to a page that asks for it.

Open this filter single ask users for their nhs number example in new window
Copy filter single ask users for their nhs number code 
<div class="nhsuk-width-container">

  <main class="nhsuk-main-wrapper" id="maincontent" role="main">

    <div class="nhsuk-grid-row">
      <div class="nhsuk-grid-column-two-thirds">

        <div class="nhsuk-form-group">
          <h1 class="nhsuk-label-wrapper">
            <label class="nhsuk-label nhsuk-label--l" for="nhs-number">
              What is your NHS number?
            </label>
          </h1>
          <div class="nhsuk-hint" id="nhs-number-hint">
            Your NHS number is a 10 digit number. For example <span class="nhsuk-u-nowrap">485 777 3456</span>.
          </div>
          <input class="nhsuk-input nhsuk-input--width-10" id="nhs-number" name="nhs-number" type="text" aria-describedby="nhs-number-hint" inputmode="numeric">
        </div>

        <button class="nhsuk-button" data-module="nhsuk-button" type="submit">
          Continue
        </button>

      </div>
    </div>

  </main>
</div>
Close filter single ask users for their nhs number code
Copy filter single ask users for their nhs number code 
{% from 'input/macro.njk' import input %}
{% from 'button/macro.njk' import button %}

{% block content %}
  <div class="nhsuk-grid-row">
    <div class="nhsuk-grid-column-two-thirds">

      {{ input({
        label: {
          text: "What is your NHS number?",
          classes: "nhsuk-label--l",
          isPageHeading: true
        },
        hint: {
          html: "Your NHS number is a 10 digit number. For example <span class=\"nhsuk-u-nowrap\">485 777 3456</span>."
        },
        id: "nhs-number",
        name: "nhs-number",
        classes: "nhsuk-input--width-10",
        inputmode: "numeric"
      }) }}

      {{ button({
        "text": "Continue"
      }) }}

   </div>
  </div>
{% endblock %}
Close filter single ask users for their nhs number code

If users do not know their NHS number, route them to a page that asks for alternative details, for example, a combination of other personal details like their postcode and date of birth.

On the filter question page and the single text input page, help users find and recognise their NHS number, for example, using hint text.

Filter question before input with 3rd option

You may want to give users a 3rd option that provides extra information about their NHS number and where to find it.

Our research and testing in alpha and discovery stages showed a 3rd option is often useful. We recommend that you always try and give a 3rd option.

Open this filter third ask users for their nhs number example in new window
Copy filter third ask users for their nhs number code 
<div class="nhsuk-width-container">

  <main class="nhsuk-main-wrapper" id="maincontent" role="main">

    <div class="nhsuk-grid-row">
      <div class="nhsuk-grid-column-two-thirds">

        <fieldset class="nhsuk-fieldset">
          <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
            Do you know your NHS number?
          </legend>

          <div class="nhsuk-hint nhsuk-u-margin-bottom-2">
            Your NHS number is a 10 digit number, like <span class="nhsuk-u-nowrap">485 777 3456</span>.
          </div>

          <div class="nhsuk-hint">
            You can find it on any letter the NHS has sent you, on a prescription, or by logging in to a GP practice online service.
          </div>

          <div class="nhsuk-form-group">

            <div class="nhsuk-radios">

              <div class="nhsuk-radios__item">
                <input class="nhsuk-radios__input" id="nhs-number-1" name="nhs-number" type="radio" value="yes">
                <label class="nhsuk-label nhsuk-radios__label" for="nhs-number-1">
                  Yes, I know my NHS number
                </label>
              </div>

              <div class="nhsuk-radios__item">
                <input class="nhsuk-radios__input" id="nhs-number-2" name="nhs-number" type="radio" value="no">
                <label class="nhsuk-label nhsuk-radios__label" for="nhs-number-2">
                  No, I do not know my NHS number
                </label>
              </div>

              <div class="nhsuk-radios__item">
                <input class="nhsuk-radios__input" id="nhs-number-3" name="nhs-number" type="radio" value="unsure">
                <label class="nhsuk-label nhsuk-radios__label" for="nhs-number-3">
                  I&#39;m not sure
                </label>
              </div>

            </div>
          </div>

          <button class="nhsuk-button" data-module="nhsuk-button" type="submit">
            Continue
          </button>

        </fieldset>

      </div>
    </div>

  </main>
</div>
Close filter third ask users for their nhs number code
Copy filter third ask users for their nhs number code 
{% from 'button/macro.njk' import button %}
{% from 'hint/macro.njk' import hint %}
{% from 'fieldset/macro.njk' import fieldset %}
{% from 'radios/macro.njk' import radios %}

{% block content %}
  <div class="nhsuk-grid-row">
    <div class="nhsuk-grid-column-two-thirds">

    {% call fieldset({
      legend: {
        "text": "Do you know your NHS number?",
        "classes": "nhsuk-fieldset__legend--l"
      }
      }) %}
      {{ hint({
        "html": "Your NHS number is a 10 digit number, like <span class=\"nhsuk-u-nowrap\">485 777 3456</span>.",
        "classes": "nhsuk-u-margin-bottom-2"
      }) }}
      {{ hint({
        "text": "You can find it on any letter the NHS has sent you, on a prescription, or by logging in to a GP practice online service."
      }) }}
      {{ radios({
        "idPrefix": "nhs-number",
        "name": "nhs-number",
        "items": [
        {
          "value": "yes",
          "text": "Yes, I know my NHS number"
        },
        {
          "value": "no",
          "text": "No, I do not know my NHS number"
        },
        {
          "value": "unsure",
          "text": "I'm not sure"
        }
      ]
      }) }}
      {{ button({
        "text": "Continue"
      }) }}
    {% endcall %}

   </div>
  </div>
{% endblock %}
Close filter third ask users for their nhs number code

How to build the NHS number pattern

When asking for an NHS number:

  • use a text input that allows for spaces and other characters between numbers, as users will type it in in different ways (for example, with dashes)
  • allow at least 12 characters in your NHS number input
  • check that the NHS number is valid by using a modulus 11 algorithm (explained on the NHS number page in the NHS Data Model and Dictionary)
  • keep the NHS number on 1 line - do not allow it to break over 2 lines. If you use the NHS frontend library or prototype kit, use this HTML code to stop the number from breaking up over 2 lines: <span class="nhsuk-u-nowrap">485 777 3456</span>.
  • add the inputmode='numeric' attribute to your input to let mobile users use a numeric keyboard on iOS devices and mobile Chrome
  • add meta name="format-detection" content="telephone=no" to your page to stop iOS treating the NHS number as a phone number (but this means that iOS will not recognise any phone numbers on the page)

Explain where users can find their NHS number and what it looks like

Users are more likely to succeed in their journey the earlier you mention that they need an NHS number and where to find it.

Give them help before they start the service. Also give them help in context using 1 of these:

Open this default details example in new window
Copy default details code 
<details class="nhsuk-details">
  <summary class="nhsuk-details__summary">
    <span class="nhsuk-details__summary-text">
      How to find your NHS number
    </span>
  </summary>
  <div class="nhsuk-details__text">
    <p>An NHS number is a 10 digit number, like 485 777 3456.</p>
    <p>You can find your NHS number by logging in to a GP online service or on any document the NHS has sent you, such as your:</p>
    <ul>
      <li>prescriptions</li>
      <li>test results</li>
      <li>hospital referral letters</li>
      <li>appointment letters</li>
    </ul>
    <p>Ask your GP surgery for help if you can't find your NHS number.</p>

  </div>
</details>
Close default details code
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Nunjucks arguments for default details
Name Type Required Description
Name text Type string Required true Description Text to be displayed on the details component.
Name html Type string Required true Description HTML content to be displayed within the details component.
Name classes Type string Required false Description Classes to add to the details element.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the details element.
Copy default details code 
{% from 'details/macro.njk' import details %}

{{ details({
  "text": "How to find your NHS number",
  "HTML": "
  <p>An NHS number is a 10 digit number, like 485 777 3456.</p>
    <p>You can find your NHS number by logging in to a GP online service or on any document the NHS has sent you, such as your:</p>
    <ul>
        <li>prescriptions</li>
        <li>test results</li>
        <li>hospital referral letters</li>
        <li>appointment letters</li>
    </ul>
    <p>Ask your GP surgery for help if you can't find your NHS number.</p>
  "
}) }}
Close default details code

Use the correct NHS number format

Write the NHS number as 3 groups of numbers, with a single space between them, like this: 485 777 3456. This is the preferred example NHS number, but you can also use 123 456 7890. You should use the same number for all examples.

Read more about how to format the NHS number in the A to Z of NHS health writing.

Write clear error messages

Make sure you use clear error messages and error summaries when you ask users for their NHS number.

Open this error ask users for their nhs number example in new window
Copy error ask users for their nhs number code 
<div class="nhsuk-width-container">

  <main class="nhsuk-main-wrapper" id="maincontent" role="main">

    <div class="nhsuk-grid-row">
      <div class="nhsuk-grid-column-two-thirds">

        <div class="nhsuk-error-summary" aria-labelledby="error-summary-title" role="alert" tabindex="-1">
          <h2 class="nhsuk-error-summary__title" id="error-summary-title">
            There is a problem
          </h2>
          <div class="nhsuk-error-summary__body">
            <ul class="nhsuk-list nhsuk-error-summary__list" role="list">
              <li>
                <a href="#nhs-number">Your NHS number is too long</a>
              </li>
            </ul>
          </div>
        </div>

        <div class="nhsuk-form-group nhsuk-form-group--error">
          <h1 class="nhsuk-label-wrapper">
            <label class="nhsuk-label nhsuk-label--l" for="nhs-number">
              What is your NHS number?
            </label>
          </h1>
          <div class="nhsuk-hint" id="nhs-number-hint">
            Your NHS number is a 10 digit number that you find on any letter the NHS has sent you. For example, <span class="nhsuk-u-nowrap">485 777 3456</span>.
          </div>
          <span class="nhsuk-error-message" id="nhs-number-error">
            <span class="nhsuk-u-visually-hidden">Error:</span> Your NHS number is too long
          </span>
          <input class="nhsuk-input nhsuk-input--width-10 nhsuk-input--error" id="nhs-number" name="nhs-number" type="text" aria-describedby="nhs-number-hint nhs-number-error" inputmode="numeric">
        </div>

        <button class="nhsuk-button" data-module="nhsuk-button" type="submit">
          Continue
        </button>

      </div>
    </div>

  </main>
</div>
Close error ask users for their nhs number code
Copy error ask users for their nhs number code 
{% from 'input/macro.njk' import input %}
{% from 'button/macro.njk' import button %}
{% from 'error-summary/macro.njk' import errorSummary %}

{% block content %}
  <div class="nhsuk-grid-row">
    <div class="nhsuk-grid-column-two-thirds">

      {{ errorSummary({
        "titleText": "There is a problem",
        "errorList": [
          {
            "text": "Your NHS number is too long",
            "href": "#nhs-number"
          }
        ]
      }) }}

      {{ input({
        label: {
          text: "What is your NHS number?",
          classes: "nhsuk-label--l",
          isPageHeading: true
        },
        hint: {
          html: "Your NHS number is a 10 digit number that you find on any letter the NHS has sent you. For example, <span class=\"nhsuk-u-nowrap\">485 777 3456</span>."
        },
        errorMessage: {
          "text": "Your NHS number is too long"
        },
        id: "nhs-number",
        name: "nhs-number",
        classes: "nhsuk-input--width-10",
        inputmode: "numeric"
      }) }}

      {{ button({
        "text": "Continue"
      }) }}

    </div>
  </div>
{% endblock %}
Close error ask users for their nhs number code

You should tell users if:

  • they have included letters
  • they have entered a number that is too short or too long (not including spaces)

You should check:

  • if the user has entered a National Insurance number and tell them if they have
  • if their NHS number is valid against a modulus 11 algorithm

Research

Our research showed that:

  • users did not always know what their NHS number looked like
  • users did not know where to find their NHS number
  • some users thought they were being asked for their National Insurance number
  • users with access needs were more likely to know their NHS number because they deal with health and social care organisations more often
  • users are more successful the earlier you tell them where to find their NHS number before starting the service

Help us improve this guidance

Share insights or feedback and take part in the discussion. We use GitHub as a collaboration space. All the information on it is open to the public.

Feedback or share insights on GitHub

Read more about how to feedback or share insights.

If you have any questions, get in touch with the service manual team.

Updated: January 2022