Sha256: 690bdc633c45abfe7d49457343f011abdd88d7625683be33ca1781382f0b74d8

Contents?: true

Size: 1.25 KB

Versions: 322

Compression:

Stored size: 1.25 KB

Contents

name: Form error message
description: Use error messages for any form fields.
govuk_frontend_components:
  - error-message
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)

  Error message must:

  - be associated with an input. The `error_message_id` must match the `aria-describedby` property on the input your label is associated with. Note that if `id` is not passed to the component an id will be generated automatically.

  If error message is within a label it will be announced in its entirety by screen readers. By associating error messages 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: "Please enter your National Insurance Number"
      id: "error_id"
  with_items:
    description: Error items are a common pattern where a collection of error is passed with each item having a text attribute of the error
    data:
      items:
        - text: Error 1
        - text: Error 2

Version data entries

322 entries across 322 versions & 1 rubygems

Version Path
govuk_publishing_components-34.2.0 app/views/govuk_publishing_components/components/docs/error_message.yml
govuk_publishing_components-34.1.3 app/views/govuk_publishing_components/components/docs/error_message.yml
govuk_publishing_components-34.1.2 app/views/govuk_publishing_components/components/docs/error_message.yml
govuk_publishing_components-34.1.1 app/views/govuk_publishing_components/components/docs/error_message.yml
govuk_publishing_components-34.1.0 app/views/govuk_publishing_components/components/docs/error_message.yml
govuk_publishing_components-34.0.0 app/views/govuk_publishing_components/components/docs/error_message.yml
govuk_publishing_components-33.1.0 app/views/govuk_publishing_components/components/docs/error_message.yml
govuk_publishing_components-33.0.0 app/views/govuk_publishing_components/components/docs/error_message.yml
govuk_publishing_components-32.1.0 app/views/govuk_publishing_components/components/docs/error_message.yml
govuk_publishing_components-32.0.0 app/views/govuk_publishing_components/components/docs/error_message.yml
govuk_publishing_components-31.2.0 app/views/govuk_publishing_components/components/docs/error_message.yml
govuk_publishing_components-31.1.2 app/views/govuk_publishing_components/components/docs/error_message.yml
govuk_publishing_components-31.1.1 app/views/govuk_publishing_components/components/docs/error_message.yml
govuk_publishing_components-31.1.0 app/views/govuk_publishing_components/components/docs/error_message.yml
govuk_publishing_components-31.0.0 app/views/govuk_publishing_components/components/docs/error_message.yml
govuk_publishing_components-30.7.3 app/views/govuk_publishing_components/components/docs/error_message.yml
govuk_publishing_components-30.7.2 app/views/govuk_publishing_components/components/docs/error_message.yml
govuk_publishing_components-30.7.1 app/views/govuk_publishing_components/components/docs/error_message.yml
govuk_publishing_components-30.7.0 app/views/govuk_publishing_components/components/docs/error_message.yml
govuk_publishing_components-30.6.1 app/views/govuk_publishing_components/components/docs/error_message.yml