Hint examples

Show params

Params

params:
- 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: true
  description: Optional id attribute to add to the hint span tag.
- name: classes
  type: string
  required: false
  description: Classes to add to the hint span tag.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the hint span tag.

accessibilityCriteria: |
  When used with a single input, the hint MUST:
  - be announced by screen readers when the input is focussed

  When used with a group of multiple inputs (such as within a fieldset), the
  hint MUST:
  - be announced by screen readers when focussing the first input within the
    group (first in this case refers to the focus order, not the DOM - if the
    user is traversing backwards through the page then this would be the last
    input within the group in the DOM)

  When used with a group of multiple inputs, the hint SHOULD NOT:
  - be announced every time for each individual input

default

It’s on your DNI, the last letter. For example, ‘A’.

Show code

Macro

{% from "components/hint/_macro.hint.njk" import componentHint %}
{{ componentHint({
  "text": "It’s on your DNI, the last letter.\nFor example, ‘A’.\n"
})  }}

Markup

<!-- hint -->
<p class="block text-neutral-dark">
  It’s on your DNI, the last letter.
For example, ‘A’.

</p>
<!-- /hint -->

with html

It’s on your DNI, the last letter. For example, ‘A’.

Show code

Macro

{% from "components/hint/_macro.hint.njk" import componentHint %}
{{ componentHint({
  "html": "It’s on your DNI, <strong class=\" font-bold \">the last letter</strong>.\nFor example, ‘A’.\n"
})  }}

Markup

<!-- hint -->
<p class="block text-neutral-dark">
  It’s on your DNI, <strong class=" font-bold ">the last letter</strong>.
For example, ‘A’.

</p>
<!-- /hint -->