Error summary

Lists the invalid fields at the top of a form after a failed submit, each one a link that moves focus to its control. Use it for forms with more than a couple of fields.

InstallationCopy Anchor Link

Set up Camaleo once (Installation), then import it. It goes with the Field parts.

import { ErrorSummary } from "@camaleo/react";

AnatomyCopy Anchor Link

A danger Alert with a title and a list of links. Every part has a data-slot you can target from CSS.

ExamplesCopy Anchor Link

Every example is a real file you can copy. They all wear the skin, mode and brand from the bar above.

In contextCopy Anchor Link

Error summaries sit at the top of real forms. These are whole pieces of UI you can copy, in the skin you picked.

With react-hook-form and zodCopy Anchor Link

Camaleo has no dependency on a form library. The signup form above wires react-hook-form and zod to Field and ErrorSummary; its Code tab has the whole file.

pnpm add react-hook-form zod @hookform/resolvers

• The schema holds the messages. zodResolver(schema) validates on submit, and each zod message becomes fieldState.error.message.
• Controller connects each control. Pass fieldState.invalid to Field invalid and the message to FieldError match={fieldState.invalid}, so the error is linked to the control and aria-invalid is set.
• Give every control an id. Use useId() and put it on the Input (or the Checkbox, NativeSelect or Rating, which pass it to the element that takes focus); the summary links to that same id.
• Build the summary from formState.errors. Show it when isSubmitted and there are errors, map each invalid name to { target: id, message: label }, and focus it when submitCount changes. Pass shouldFocusError: false, or react-hook-form moves focus to the first field instead.
• Use noValidate on the form. The browser's own bubbles would show before your messages.

const { control, handleSubmit, formState: { errors, isSubmitted, submitCount } } =
	useForm<Values>({ resolver: zodResolver(schema), defaultValues, shouldFocusError: false });
const invalid = (Object.keys(labels) as (keyof Values)[]).filter((name) => errors[name]);

useEffect(() => {
	if (submitCount > 0) summaryRef.current?.focus();
}, [submitCount]);

{isSubmitted && invalid.length > 0 && (
	<ErrorSummary
		ref={summaryRef}
		tabIndex={-1}
		title={`Fix ${invalid.length} fields to continue.`}
		errors={invalid.map((name) => ({ target: ids[name], message: labels[name] }))}
	/>
)}

GuidelinesCopy Anchor Link

PropsCopy Anchor Link

Styling hooksCopy Anchor Link

Restyle it without forking: target the attributes, or set the tokens on a parent, a skin or the summary itself.

/* one error per line, only in the checkout */
.checkout [data-slot="error-summary-list"] {
  flex-direction: column;
}

AccessibilityCopy Anchor Link

• It renders with role="alert", so screen readers announce it as soon as it appears.
• Move focus to it after a failed submit (ref + tabIndex={-1}), so keyboard users start from the list instead of the submit button.
• Each link focuses the control itself, not just its label, so people can type right away.
• Keep the inline FieldError on every field too: the summary is the map, the field says what to change.

RelatedCopy Anchor Link