Sha256: 4837f933d3fee671925094dad302e3b8683128d00817ad81ee7f993ca02bc4c9

Contents?: true

Size: 1.45 KB

Versions: 85

Compression:

Stored size: 1.45 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).
    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

85 entries across 85 versions & 1 rubygems

Version Path
govuk_publishing_components-43.1.0 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-43.0.2 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-43.0.1 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-43.0.0 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-42.1.0 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-42.0.0 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-41.1.2 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-41.1.1 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-41.1.0 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-41.0.0 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-40.1.0 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-40.0.0 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-39.2.5 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-39.2.4 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-39.2.3 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-39.2.2 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-39.2.1 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-39.2.0 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-39.1.0 app/views/govuk_publishing_components/components/docs/hint.yml
govuk_publishing_components-39.0.0 app/views/govuk_publishing_components/components/docs/hint.yml