Examples

Guidance

• Inline errors are built in to all design-system form fields but can be used on their own to create custom fields.
• Inline errors should sit either directly above or below the input, depending on the theme defaults.
• Visually align inline validation messages with the input fields, so people using screen magnifiers can read them quickly.
• The form field should have an aria-describedby attribute that references the id of the error message.

Guidelines

Content

• Describe what the user still needs to do in a mandatory field that has been left incomplete or unanswered, or answered incorrectly.
• Repeat what the form label is asking the user to do, but with slightly more detail.
• Use the fewest words possible (i.e., don't use "please").
• Use sentence case.
• End with a period.

Accessibility

General accessibility

• Inline error text should be outside of the label element.
• The form field should have an aria-describedby attribute that references the id of the error message.
• Inline error text should meet size and contrast requirements.

Accessibility Testing

Screen reader testing

• When the input field gets focus, its label should be read first and then its hint after a slight delay.

Code

React

Review Storybook for React guidance of this component.

Web Component

Go to Storybook for Web Component guidance of this component.

Component maturity

Learn More

• Form Guidelines