Skip to main content

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 in new window
Copy
<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>
  <span 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>.
  </span>
  <input class="nhsuk-input nhsuk-input--width-10" id="nhs-number" name="nhs-number" type="text" aria-describedby="nhs-number-hint">
</div>

<button class="nhsuk-button" type="submit">
  Continue
</button>
Copy
{% from 'input/macro.njk' import input %}
{% from 'button/macro.njk' import button %}

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

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

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 in new window
Copy
<fieldset class="nhsuk-fieldset">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
    Do you know your NHS number?
  </legend>

  <span 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>.
  </span>

  <span 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.
  </span>

  <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" type="submit">
    Continue
  </button>

</fieldset>
Copy
{% from 'button/macro.njk' import button %}
{% from 'hint/macro.njk' import hint %}
{% from 'fieldset/macro.njk' import fieldset %}
{% from 'radios/macro.njk' import radios %}

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

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

Open in new window
Copy
<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>
  <span 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>.
  </span>
  <input class="nhsuk-input nhsuk-input--width-10" id="nhs-number" name="nhs-number" type="text" aria-describedby="nhs-number-hint">
</div>

<button class="nhsuk-button" type="submit">
  Continue
</button>
Copy
{% from 'input/macro.njk' import input %}
{% from 'button/macro.njk' import button %}

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

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

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 in new window
Copy
<fieldset class="nhsuk-fieldset">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
    Do you know your NHS number?
  </legend>

  <span 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>.
  </span>

  <span 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.
  </span>

  <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" type="submit">
    Continue
  </button>

</fieldset>
Copy
{% from 'button/macro.njk' import button %}
{% from 'hint/macro.njk' import hint %}
{% from 'fieldset/macro.njk' import fieldset %}
{% from 'radios/macro.njk' import radios %}

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

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 (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 in new window
Copy
<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>
Copy
{% 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>
  "
}) }}

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 in new window
Copy
<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>
  <span 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>.
  </span>
  <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">
</div>

<button class="nhsuk-button" type="submit">
  Continue
</button>
Copy
{% from 'input/macro.njk' import input %}
{% from 'button/macro.njk' import button %}

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

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

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

Discuss

Discuss NHS number pattern on GitHub

Get in touch

If you have a question:

Updated: November 2019