ValidationSummary

ValidationSummary gives long forms a single error summary near the submit action or page top, while individual fields still own their local errors.

#Default usage

<ValidationSummary
  errors={[
    { id: "amount", field: "Amount", message: "Enter a value greater than zero.", href: "#amount" },
    { id: "website", field: "Website", message: "Use an allowed protocol.", href: "#website" },
  ]}
/>

#Import

import { ValidationSummary } from "@froggdesign/enter-ui-react";

#Patterns

Use ValidationSummary for admin forms, onboarding flows, billing settings, and multi-section forms where users need a concise list of corrections.

#Accessibility

The summary renders role="alert" only when errors exist. Use href to let keyboard and assistive technology users jump directly to the affected field.

#API

• errors: { id?, field?, message, href? }[].
• title: custom summary heading.
• Supports native div props and className.

#Styling

ValidationSummary uses .eui-validation-summary classes and FroggDesign tokens for layout, state, focus, and disabled styling.