Component
Form hint text
Use hints for any form fields.
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 thearia-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
} %>