Component

Form hint text

Use hints for any form fields.

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.

How to call this component

<%= render "govuk_publishing_components/components/hint", {
  text: "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
} %>

GOV.UK Design System

This component incorporates components from the GOV.UK Design System:

Accessibility acceptance criteria

All text must have a contrast ratio higher than 4.5:1 against the background colour to meet WCAG AA

Hint text must:

  • be associated with an input. The hint_id must match the aria-describedby property on the input your label is associated with.

If hint text is within a label it will be announced in its entirety by screen readers. By associating hints with inputs using aria-describedby, then screen readers will read the label, describe the type of input (eg radio) and then read additional text. It means users of screen readers can scan and skip options as easy as people making choices with sight.

Other examples

Standard options

This component uses the component wrapper helper. It accepts the following options and applies them to the parent element of the component. See the component wrapper helper documentation for more detail.

  • id - accepts a string for the element ID attribute
  • data_attributes - accepts a hash of data attributes
  • aria - accepts a hash of aria attributes
  • classes - accepts a space separated string of classes, these should not be used for styling and must be prefixed with js-
  • margin_bottom - accepts a number from 0 to 9 (0px to 60px) using the GOV.UK Frontend spacing scale (defaults to no margin)
  • role - accepts a space separated string of roles
  • lang - accepts a language attribute value
  • open - accepts an open attribute value (true or false)
  • hidden - accepts an empty string, ‘hidden’, or ‘until-found’
  • tabindex - accepts an integer. The integer can also be passed as a string.
  • dir - accepts ‘rtl’, ‘ltr’, or ‘auto’.

With margin bottom (preview)

The component accepts a number for margin bottom from 0 to 9 (0px to 60px) using the GOV.UK Frontend spacing scale.

You qualify if you were born in the UK before June 1960. 
<%= render "govuk_publishing_components/components/hint", {
  text: "You qualify if you were born in the UK before June 1960.",
  margin_bottom: 9
} %>

With dir attribute (preview)

Allows the correct display of right to left languages.

العربيَّة 
<%= render "govuk_publishing_components/components/hint", {
  text: "العربيَّة",
  right_to_left: true
} %>