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.",
    ]}
  />

Visual variants

Themes

primary

Review these fields

Two fields need attention before continuing.

Email is required.

secondary

Review these fields

Two fields need attention before continuing.

Email is required.

tertiary

Review these fields

Two fields need attention before continuing.

Email is required.

quaternary

Review these fields

Two fields need attention before continuing.

Email is required.

States

success

Review these fields

Two fields need attention before continuing.

Email is required.

warning

Review these fields

Two fields need attention before continuing.

Email is required.

error

Review these fields

Two fields need attention before continuing.

Email is required.

info

Review these fields

Two fields need attention before continuing.

Email is required.

Variants

solid

Review these fields

Two fields need attention before continuing.

Email is required.

outline

Review these fields

Two fields need attention before continuing.

Email is required.

glass

Review these fields

Two fields need attention before continuing.

Email is required.

Rounding

none

Review these fields

Two fields need attention before continuing.

Email is required.

medium

Review these fields

Two fields need attention before continuing.

Email is required.

large

Review these fields

Two fields need attention before continuing.

Email is required.

Shadows

none

Review these fields

Two fields need attention before continuing.

Email is required.

light

Review these fields

Two fields need attention before continuing.

Email is required.

strong

Review these fields

Two fields need attention before continuing.

Email is required.

visual-variants.tsx

// Themes
<ValidationSummary theme="primary"
    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.",
    ]}
  />
<ValidationSummary theme="secondary"
    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.",
    ]}
  />
<ValidationSummary theme="tertiary"
    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.",
    ]}
  />
<ValidationSummary theme="quaternary"
    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.",
    ]}
  />

// States
<ValidationSummary state="success"
    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.",
    ]}
  />
<ValidationSummary state="warning"
    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.",
    ]}
  />
<ValidationSummary state="error"
    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.",
    ]}
  />
<ValidationSummary state="info"
    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.",
    ]}
  />

// Variants
<ValidationSummary variant="solid"
    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.",
    ]}
  />
<ValidationSummary variant="outline"
    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.",
    ]}
  />
<ValidationSummary variant="glass"
    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.",
    ]}
  />

// Rounding
<ValidationSummary rounding="none"
    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.",
    ]}
  />
<ValidationSummary rounding="medium"
    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.",
    ]}
  />
<ValidationSummary rounding="large"
    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.",
    ]}
  />

// Shadows
<ValidationSummary shadow="none"
    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.",
    ]}
  />
<ValidationSummary shadow="light"
    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.",
    ]}
  />
<ValidationSummary shadow="strong"
    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.",
    ]}
  />

Interaction states

Disabled

Review these fields

Two fields need attention before continuing.

Email is required.

Checking validation

Review these fields

Two fields need attention before continuing.

Email is required.

interaction-states.tsx

// Disabled
<ValidationSummary disabled
    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.",
    ]}
  />
// Loading
<ValidationSummary loading
    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.