Sha256: cf14625b51ae83bf0d5594a0b4c8d83d0cad78c1e8c30715f1df6efea5d8ea71

Contents?: true

Size: 1.33 KB

Versions: 52

Compression:

Stored size: 1.33 KB

Contents

name: Form hint text
description: Use hints for any form fields.
govuk_frontend_components:
  - hint
accessibility_criteria: |
  All text must have a contrast ratio higher than 4.5:1 against the background colour to meet [WCAG AA](https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast)

  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.
examples:
  default:
    data:
      text: "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
  with_margin_bottom:
    description: The component accepts a number for margin bottom from `0` to `9` (`0px` to `60px`) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to a margin bottom of `3` (`15px`).
    data:
      text: "You qualify if you were born in the UK before June 1960."
      margin_bottom: 9

Version data entries

52 entries across 52 versions & 1 rubygems

Version Path
govuk_publishing_components-30.6.0 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-30.5.2 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-30.5.1 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-30.5.0 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-30.4.1 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-30.4.0 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-30.3.0 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-30.2.1 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-30.2.0 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-30.1.0 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-30.0.0 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-29.15.3 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-29.15.2 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-29.15.1 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-29.15.0 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-29.14.0 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-29.13.0 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-29.12.1 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-29.12.0 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-29.11.0 app/views/govuk_publishing_components/components/docs/hint.yml