Validation Summary

The ValidationSummary component collects form issues into an accessible alert or status region.

Usage & Examples

Form Issues

Review these fields

Two fields need attention before continuing.

Email is required.

form-issues.tsx

<ValidationSummary
  title="Review these fields"
  description="Two fields need attention before continuing."
  items={[
    { id: "email", message: "Email is required.", href: "#email" },
    "Password must be at least 12 characters.",
  ]}
/>

Props API

Validation Summary props API
				Default	Description
`children`	`ReactNode`	No	props	`—`	Main content rendered inside the component after the generated validation list.
`className`	`string`	No	styling	`—`	Additional class name for the component root.
`containerClassName`	`string`	No	props	`—`	Additional class name for the outer label/component container.
`contentClassName`	`string`	No	props	`—`	Additional class name for the content area.
`data-testid`	`string`	No	testing	`—`	Backward-compatible alias for test ID attributes.
`description`	`ReactNode`	No	props	`—`	Supporting text rendered beneath the title.
`descriptionClassName`	`string`	No	props	`—`	Additional class name for the description.
`disabled`	`boolean`	No	props	`false`	Whether the component is disabled.
`emptyClassName`	`string`	No	props	`—`	Additional class name for empty-state text.
`emptyMessage`	`ReactNode`	No	props	`—`	Message rendered when there are no validation items and hideWhenEmpty is false.
`focusable`	`boolean`	No	props	`true`	Whether the summary should be focusable for programmatic focus.
`focusOnMount`	`boolean`	No	props	`false`	Whether the summary should focus itself when validation items are present.