Sha256: 1a5e88c446fe783641e65b75a15b98c0266b563e5c8f9c5924ff1ae0b42ae7bd

Contents?: true

Size: 1.48 KB

Versions: 45

Compression:

Stored size: 1.48 KB

Contents

name: Form hint text
description: Use hints for any form fields.
govuk_frontend_components:
  - hint
uses_component_wrapper_helper: true
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).
    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

45 entries across 45 versions & 1 rubygems

Version Path
govuk_publishing_components-49.1.0 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-49.0.0 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-48.0.0 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-47.0.0 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-46.4.0 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-46.3.1 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-46.3.0 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-46.2.0 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-46.1.0 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-46.0.0 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-45.10.0 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-45.9.0 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-45.8.0 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-45.7.0 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-45.6.1 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-45.6.0 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-45.5.0 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-45.4.1 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-45.4.0 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-45.3.0 app/views/govuk_publishing_components/components/docs/hint.yml