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)
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
<%= render "components/error-message", {
id: "unique-error-id",
text: "Descriptive error message"
} %>