Installation
npx sdaia-ui@latest add error-summary
Usage
import { ErrorSummary } from '@/components/ui/ErrorSummary';<ErrorSummary
autoFocus
title="There is a problem"
intro="Fix the following to continue:"
errors={[
{ id: "full-name", message: "Enter your full name" },
{ id: "email", message: "Enter a valid email address" },
]}
/>RTL
The list, bullets and links mirror for Arabic.
Loading demo: error-summary-rtl
Examples
Two errors
Two required fields were left empty. Each link focuses its field.
Loading demo: error-summary-default
Three errors
Three fields need attention, including a select.
Loading demo: error-summary-three-items
Four errors
The longest version. Consider grouping fields when the list gets long.
Loading demo: error-summary-four-items
Without intro
The intro line is optional.
Loading demo: error-summary-without-intro
After a failed submit
Submit the empty form: the summary appears and takes focus. Fix the fields and submit again.
Loading demo: error-summary-on-submit
When to use
- Long forms with several fields to validate
- After a failed submit
- Server-side errors that cannot sit next to a field
- Forms where an error may be out of view