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>
Close
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."
}) }}
Close

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" inputmode="numeric">
</div>
Close
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",
  inputmode: "numeric"
}) }}
Close

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

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>
Close
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."
      }
    }
  ]
}) }}
Close

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>
Close
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"
    }
  ]
}) }}
Close

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>
Close
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."
  }
}) }}
Close

Have you tested this component?

If so, please share your research findings and let us know how it has worked for you. This will help us improve it for everyone.

Before you start, you will need a GitHub account. It's an open forum where we collect feedback.

Share your findings on GitHub

If you have any questions, you can message us on Slack. You will need a Slack account if you do not have one. Or you can contact us by email.

Updated: January 2020