Component

Form error message

Component to show a red error message - used for form validation. Use inside a label or legend.

How it looks (preview all)

Descriptive error message

How to call this component

<%= render "components/error-message", {
  text: "Descriptive error message"
} %>

Accessibility acceptance criteria

• have a text contrast ratio higher than 4.5:1 against the background colour to meet WCAG AA

Other examples

Outside label or legend (preview)

Used if the error message is not inside a label or legend, for example with aria-describedby

Descriptive error message

<%= render "components/error-message", {
  id: "unique-error-id",
  text: "Descriptive error message"
} %>