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:

Hint

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

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