Sha256: 51926dfab5790f893240e69e749fb28a1f5b6ac684934916413c2442c849c172

Contents?: true

Size: 1.5 KB

Versions: 29

Compression:

Stored size: 1.5 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
  with_dir_attribute:
    description: |
      Allows the correct display of right to left languages.
    data:
      text: "العربيَّة"
      right_to_left: true

Version data entries

29 entries across 29 versions & 1 rubygems

Version Path
govuk_publishing_components-35.3.5 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-35.3.4 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-35.3.3 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-35.3.2 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-35.3.1 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-35.3.0 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-35.2.0 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-35.1.1 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-35.1.0 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-35.0.0 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-34.14.0 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-34.13.0 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-34.12.0 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-34.11.0 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-34.10.1 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-34.10.0 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-34.9.1 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-34.9.0 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-34.8.1 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-34.8.0 app/views/govuk_publishing_components/components/docs/hint.yml