Form elements - Hint text

Use hint text to help users understand a question.

Open this hint text example in new window
Copy 
<div class="nhsuk-hint">
  Your NHS number is a 10 digit number that you can find on any letter the NHS has sent you. For example, 458 777 3456.
</div>
Copy 
{% from 'hint/macro.njk' import hint %}

{{ hint({
  "text": "Your NHS number is a 10 digit number that you can find on any letter the NHS has sent you. For example, 458 777 3456."
}) }}

How to use hint text

Use hint text to give users help in context - like where to find information or how their data will be used.

Text input with hint text

Open this input hint text example in new window
Copy 
<div class="nhsuk-form-group">
  <label class="nhsuk-label" for="example-with-hint-text">
    What is your NHS number?
  </label>
  <div class="nhsuk-hint" id="example-with-hint-text-hint">
    Your NHS number is a 10 digit number that you find on any letter the NHS has sent you. For example, 485 777 3456.
  </div>
  <input class="nhsuk-input nhsuk-input--width-10" id="example-with-hint-text" name="example-with-hint-text" type="text" aria-describedby="example-with-hint-text-hint">
</div>
Copy 
{% from 'input/macro.njk' import input %}

{{ input({
  "label": {
    "text": "What is your NHS number?"
  },
    "hint": {
    "text": "Your NHS number is a 10 digit number that you find on any letter the NHS has sent you. For example, 485 777 3456."
  },
  "id": "example-with-hint-text",
  "name": "example-with-hint-text",
  "classes": "nhsuk-input--width-10"
}) }}

Radios with hint text

Open this radios hints example in new window
Copy 
<fieldset class="nhsuk-fieldset">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
    <h1 class="nhsuk-fieldset__heading">
      Do you know your NHS number?
    </h1>
  </legend>

  <div class="nhsuk-hint nhsuk-u-margin-bottom-2">
    This is a 10 digit number, like 485 777 3456.
  </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="example-hints-1" name="example-hints" type="radio" value="yes">
        <label class="nhsuk-label nhsuk-radios__label" for="example-hints-1">
          Yes, I know my NHS number
        </label>
      </div>

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

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

    </div>
  </div>

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

{% call fieldset({
  legend: {
    "text": "Do you know your NHS number?",
    "classes": "nhsuk-fieldset__legend--l",
    "isPageHeading": true
  }
  }) %}
  {{ hint({
    "text": "This is a 10 digit number, like 485 777 3456.",
    "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": "example-hints",
    "name": "example-hints",
    "items": [
  {
    "value": "yes",
    "text": "Yes, I know my NHS number"
  },
  {
    "value": "no",
    "text": "No, I do not know my NHS number"
  },
  {
    "value": "not sure",
    "text": "I'm not sure"
  }
]
}) }}
{% endcall %}

Radio items with hints

You can add hints to radios to give more information about the options.

Open this radios hints options example in new window
Copy 
<div class="nhsuk-form-group">

  <fieldset class="nhsuk-fieldset">
    <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
      <h1 class="nhsuk-fieldset__heading">
        How do you want to sign in?
      </h1>
    </legend>

    <div class="nhsuk-radios">

      <div class="nhsuk-radios__item">
        <input class="nhsuk-radios__input" id="example-hints-1" name="example-hints" type="radio" value="gateway" aria-describedby="example-hints-1-item-hint">
        <label class="nhsuk-label nhsuk-radios__label" for="example-hints-1">
          Sign in with NHS login
        </label>
        <div class="nhsuk-hint nhsuk-radios__hint" id="example-hints-1-item-hint">
          You&#39;ll have a user ID if you&#39;ve registered for the NHS App.
        </div>
      </div>

      <div class="nhsuk-radios__item">
        <input class="nhsuk-radios__input" id="example-hints-2" name="example-hints" type="radio" value="verify" aria-describedby="example-hints-2-item-hint">
        <label class="nhsuk-label nhsuk-radios__label" for="example-hints-2">
          Sign in with GOV.UK Verify
        </label>
        <div class="nhsuk-hint nhsuk-radios__hint" id="example-hints-2-item-hint">
          You&#39;ll have an account if you&#39;ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity.
        </div>
      </div>

    </div>
  </fieldset>

</div>
Copy 
{% from 'radios/macro.njk' import radios %}

{{ radios({
  "idPrefix": "example-hints",
  "name": "example-hints",
  "fieldset": {
    "legend": {
      "text": "How do you want to sign in?",
      "classes": "nhsuk-fieldset__legend--l",
      "isPageHeading": true
    }
  },
  "items": [
    {
      "value": "gateway",
      "text": "Sign in with NHS login",
      "hint": {
        "text": "You'll have a user ID if you've registered for the NHS App."
      }
    },
    {
      "value": "verify",
      "text": "Sign in with GOV.UK Verify",
      "hint": {
        "text": "You'll have an account if you've already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity."
      }
    }
  ]
}) }}

Checkboxes with hint text

Unlike with radios, users can select more than 1 option from a list of checkboxes. Do not assume that users will know how many options they can select.

Open this checkboxes hint example in new window
Copy 
<div class="nhsuk-form-group">

  <fieldset class="nhsuk-fieldset" aria-describedby="contact-hint">
    <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
      <h1 class="nhsuk-fieldset__heading">
        How would you like to be contacted?
      </h1>
    </legend>

    <div class="nhsuk-hint" id="contact-hint">
      Select all options that are relevant to you.
    </div>

    <div class="nhsuk-checkboxes">

      <div class="nhsuk-checkboxes__item">
        <input class="nhsuk-checkboxes__input" id="contact" name="contact" type="checkbox" value="email">
        <label class="nhsuk-label nhsuk-checkboxes__label" for="contact">
          Email
        </label>
      </div>

      <div class="nhsuk-checkboxes__item">
        <input class="nhsuk-checkboxes__input" id="contact-2" name="contact" type="checkbox" value="phone">
        <label class="nhsuk-label nhsuk-checkboxes__label" for="contact-2">
          Phone
        </label>
      </div>

      <div class="nhsuk-checkboxes__item">
        <input class="nhsuk-checkboxes__input" id="contact-3" name="contact" type="checkbox" value="text message">
        <label class="nhsuk-label nhsuk-checkboxes__label" for="contact-3">
          Text message
        </label>
      </div>

    </div>
  </fieldset>

</div>
Copy 
{% from 'checkboxes/macro.njk' import checkboxes %}

{{ checkboxes({
  "idPrefix": "contact",
  "name": "contact",
  "fieldset": {
    "legend": {
      "text": "How would you like to be contacted?",
      "classes": "nhsuk-fieldset__legend--l",
      isPageHeading: true
    }
  },
  "hint": {
    "text": "Select all options that are relevant to you."
  },
  "items": [
    {
      "value": "email",
      "text": "Email",
      id: "contact"
    },
    {
      "value": "phone",
      "text": "Phone"
    },
    {
      "value": "text message",
      "text": "Text message"
    }
  ]
}) }}

Textarea with hint text

Open this textarea example in new window
Copy 
<div class="nhsuk-form-group">
  <label class="nhsuk-label" for="example">
    Can you provide more detail?
  </label>
  <div class="nhsuk-hint" id="example-hint">
    Do not include personal or financial information, for example, your National Insurance number or credit card details.
  </div>
  <textarea class="nhsuk-textarea" id="example" name="example" rows="5" aria-describedby="example-hint"></textarea>
</div>
Copy 
{% from 'textarea/macro.njk' import textarea %}

{{ textarea({
  "name": "example",
  "id": "example",
  "label": {
    "text": "Can you provide more detail?"
  },
  "hint": {
    "text": "Do not include personal or financial information, for example, your National Insurance number or credit card details."
  }
}) }}

Help improve this page

The manual is a community effort. Anyone can help improve and grow it.

To help make sure the Hint text guidance is useful, relevant and up to date, you can:

Need help?

If you’ve got a question about the NHS digital service manual or want to feedback, get in touch.

Updated: January 2020