Form elements - Hint text

Use hint text to help users understand a question.

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

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

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

    <div class="hs2-checkboxes">

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

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

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

    </div>
  </fieldset>

</div>
Close checkboxes hint text 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 checkboxes hint text
Name Type Required Description
Name text Type string Required true Description If `html` is set, this is not required. Text to use within the hint. If `html` is provided, the `text` argument will be ignored.
Name html Type string Required true Description If `text` is set, this is not required. HTML to use within the hint. If `html` is provided, the `text` argument will be ignored.
Name id Type string Required false Description Id attribute to add to the hint.
Name classes Type string Required false Description Classes to add to the hint.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the hint.
Copy checkboxes hint text code 
{% from 'checkboxes/macro.njk' import checkboxes %}

{{ checkboxes({
  "idPrefix": "contact",
  "name": "contact",
  "fieldset": {
    "legend": {
      "text": "How would you like to be contacted?",
      "classes": "hs2-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 checkboxes hint text code

How to use hint text

Text input with hint text

Open this input hint text example in new window
Copy input hint text code 
<div class="hs2-form-group">
  <label class="hs2-label" for="example-with-hint-text">
    What is your support incident number?
  </label>
  <div class="hs2-hint" id="example-with-hint-text-hint">
    Your support incident number is a 10 digit number that you find in the email HS2 has sent you when you reported the incident. For example, 485 777 3456.
  </div>
  <input class="hs2-input hs2-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 input hint text 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 input hint text
Name Type Required Description
Name text Type string Required true Description If `html` is set, this is not required. Text to use within the hint. If `html` is provided, the `text` argument will be ignored.
Name html Type string Required true Description If `text` is set, this is not required. HTML to use within the hint. If `html` is provided, the `text` argument will be ignored.
Name id Type string Required false Description Id attribute to add to the hint.
Name classes Type string Required false Description Classes to add to the hint.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the hint.
Copy input hint text code 
{% from 'input/macro.njk' import input %}

{{ input({
  "label": {
    "text": "What is your support incident number?"
  },
    "hint": {
    "text": "Your support incident number is a 10 digit number that you find in the email HS2 has sent you when you reported the incident. For example, 485 777 3456."
  },
  id: "example-with-hint-text",
  name: "example-with-hint-text",
  classes: "hs2-input--width-10",
  inputmode: "numeric"
}) }}
Close input hint text code

Radios with hint text

Open this radios hint text example in new window
Copy radios hint text code 
<fieldset class="hs2-fieldset">
  <legend class="hs2-fieldset__legend hs2-fieldset__legend--l">
    <h1 class="hs2-fieldset__heading">
      Do you know your incident number?
    </h1>
  </legend>

  <div class="hs2-hint hs2-u-margin-bottom-2">
    This is a 10 digit number, like 485 777 3456.
  </div>

  <div class="hs2-hint">
    You can find it in the email that HS2 has sent you when you reported the incident.
  </div>

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

    <div class="hs2-radios">

      <div class="hs2-radios__item">
        <input class="hs2-radios__input" id="example-hints-1" name="example-hints" type="radio" value="yes">
        <label class="hs2-label hs2-radios__label" for="example-hints-1">
          Yes, I know my incident number
        </label>
      </div>

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

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

    </div>
  </div>

</fieldset>
Close radios hint text 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 radios hint text
Name Type Required Description
Name text Type string Required true Description If `html` is set, this is not required. Text to use within the hint. If `html` is provided, the `text` argument will be ignored.
Name html Type string Required true Description If `text` is set, this is not required. HTML to use within the hint. If `html` is provided, the `text` argument will be ignored.
Name id Type string Required false Description Id attribute to add to the hint.
Name classes Type string Required false Description Classes to add to the hint.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the hint.
Copy radios hint text code 
{% 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 incident number?",
    "classes": "hs2-fieldset__legend--l",
    "isPageHeading": true
  }
  }) %}
  {{ hint({
    "text": "This is a 10 digit number, like 485 777 3456.",
    "classes": "hs2-u-margin-bottom-2"
  }) }}
  {{ hint({
    "text": "You can find it in the email that HS2 has sent you when you reported the incident."
  }) }}
  {{ radios({
    "idPrefix": "example-hints",
    "name": "example-hints",
    "items": [
  {
    "value": "yes",
    "text": "Yes, I know my incident number"
  },
  {
    "value": "no",
    "text": "No, I do not know my incident number"
  },
  {
    "value": "not sure",
    "text": "I'm not sure"
  }
]
}) }}
{% endcall %}
Close radios hint text code

Radio items with hints

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

Open this radio item with hints hint text example in new window
Copy radio item with hints hint text code 
<div class="hs2-form-group">

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

    <div class="hs2-radios">

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

      <div class="hs2-radios__item">
        <input class="hs2-radios__input" id="example-hints-2" name="example-hints" type="radio" value="verify" aria-describedby="example-hints-2-item-hint">
        <label class="hs2-label hs2-radios__label" for="example-hints-2">
          Sign in with GOV.UK Verify
        </label>
        <div class="hs2-hint hs2-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 radio item with hints hint text 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 radio item with hints hint text
Name Type Required Description
Name text Type string Required true Description If `html` is set, this is not required. Text to use within the hint. If `html` is provided, the `text` argument will be ignored.
Name html Type string Required true Description If `text` is set, this is not required. HTML to use within the hint. If `html` is provided, the `text` argument will be ignored.
Name id Type string Required false Description Id attribute to add to the hint.
Name classes Type string Required false Description Classes to add to the hint.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the hint.
Copy radio item with hints hint text code 
{% from 'radios/macro.njk' import radios %}

{{ radios({
  "idPrefix": "example-hints",
  "name": "example-hints",
  "fieldset": {
    "legend": {
      "text": "How do you want to sign in?",
      "classes": "hs2-fieldset__legend--l",
      "isPageHeading": true
    }
  },
  "items": [
    {
      "value": "gateway",
      "text": "Sign in with HS2 login",
      "hint": {
        "text": "You'll have a user ID if you've registered for the HS2 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 radio item with hints hint text code

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 text example in new window
Copy checkboxes hint text code 
<div class="hs2-form-group">

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

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

    <div class="hs2-checkboxes">

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

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

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

    </div>
  </fieldset>

</div>
Close checkboxes hint text 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 checkboxes hint text
Name Type Required Description
Name text Type string Required true Description If `html` is set, this is not required. Text to use within the hint. If `html` is provided, the `text` argument will be ignored.
Name html Type string Required true Description If `text` is set, this is not required. HTML to use within the hint. If `html` is provided, the `text` argument will be ignored.
Name id Type string Required false Description Id attribute to add to the hint.
Name classes Type string Required false Description Classes to add to the hint.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the hint.
Copy checkboxes hint text code 
{% from 'checkboxes/macro.njk' import checkboxes %}

{{ checkboxes({
  "idPrefix": "contact",
  "name": "contact",
  "fieldset": {
    "legend": {
      "text": "How would you like to be contacted?",
      "classes": "hs2-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 checkboxes hint text code

Textarea with hint text

Open this textarea hint text example in new window
Copy textarea hint text code 
<div class="hs2-form-group">
  <label class="hs2-label" for="example">
    Can you provide more detail?
  </label>
  <div class="hs2-hint" id="example-hint">
    Do not include personal or financial information, for example, your National Insurance number or credit card details.
  </div>
  <textarea class="hs2-textarea" id="example" name="example" rows="5" aria-describedby="example-hint"></textarea>
</div>
Close textarea hint text 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 textarea hint text
Name Type Required Description
Name text Type string Required true Description If `html` is set, this is not required. Text to use within the hint. If `html` is provided, the `text` argument will be ignored.
Name html Type string Required true Description If `text` is set, this is not required. HTML to use within the hint. If `html` is provided, the `text` argument will be ignored.
Name id Type string Required false Description Id attribute to add to the hint.
Name classes Type string Required false Description Classes to add to the hint.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the hint.
Copy textarea hint text code 
{% 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 textarea hint text code