FormErrorSummary
The list of problems after a submit fails, placed at the top of the form. Use it with inline errors on each field, never instead of them.
- FormErrorSummary
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, FormErrorSummary
There are 2 problems with this form
Enter a title
Enter an email address like name@example.com
Dark theme, FormErrorSummary
There are 2 problems with this form
Enter a title
Enter an email address like name@example.com
High contrast theme, FormErrorSummary
There are 2 problems with this form
Enter a title
Enter an email address like name@example.com
UsageLink to the section Usage
import { FormErrorSummary } from '@skribly/ui/forms'<FormErrorSummary
title="There are 2 problems with this form"
errors={[{ fieldId: 'title', message: 'Enter a title' }]}
/>Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- It is an assertive alert and takes focus when it appears, so keyboard and screen reader users land on it after submitting.
- Each item is a link that moves focus to its field and scrolls it into view.
- The heading level is a prop, to fit the page outline.
- The demo keeps autoFocus off, so the gallery does not jump.
This demo runs through axe in all three themes on every test run. See what the tests check.