Error summary

Resumo de erros que lista os campos inválidos no topo de um formulário depois de um envio com erro, cada um como um link que leva o foco ao controle. Use em formulários com mais de dois ou três campos.

InstalaçãoCopy Anchor Link

Configure o Camaleo uma vez (Instalação) e importe o componente. Ele trabalha junto com as partes do Field.

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

AnatomiaCopy Anchor Link

Um Alert de perigo com título e uma lista de links. Cada parte tem um data-slot que você pode usar no CSS.

ExemplosCopy Anchor Link

Cada exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor escolhidos na barra acima.

Em contextoCopy Anchor Link

O resumo de erros fica no topo de formulários reais. São pedaços inteiros de interface para copiar, no estilo que você escolheu.

Com react-hook-form e zodCopy Anchor Link

O Camaleo não depende de nenhuma biblioteca de formulários. O cadastro acima liga react-hook-form e zod ao Field e ao ErrorSummary; a aba Código tem o arquivo inteiro.

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

• O schema guarda as mensagens. O zodResolver(schema) valida no envio, e cada mensagem do zod vira fieldState.error.message.
• O Controller conecta cada controle. Passe fieldState.invalid para Field invalid e a mensagem para FieldError match={fieldState.invalid}, assim o erro fica ligado ao controle e o aria-invalid é marcado.
• Dê um id a cada controle. Use useId() e coloque no Input (ou no Checkbox, NativeSelect ou Rating, que o repassam ao elemento que recebe o foco); o resumo aponta para esse mesmo id.
• Monte o resumo a partir de formState.errors. Mostre quando isSubmitted e houver erros, transforme cada nome inválido em { target: id, message: rótulo } e dê foco a ele quando submitCount mudar. Passe shouldFocusError: false para o react-hook-form não levar o foco ao primeiro campo antes.
• Use noValidate no formulário. Senão os balões do próprio navegador aparecem antes das suas mensagens.

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={`Corrija ${invalid.length} campos para continuar.`}
		errors={invalid.map((name) => ({ target: ids[name], message: labels[name] }))}
	/>
)}

Boas práticasCopy Anchor Link

PropsCopy Anchor Link

Styling hooksCopy Anchor Link

Mude o visual sem copiar o componente: use os atributos ou defina os tokens num elemento pai, num estilo ou no próprio resumo.

/* um erro por linha, só no checkout */
.checkout [data-slot="error-summary-list"] {
  flex-direction: column;
}

AcessibilidadeCopy Anchor Link

• Ele usa role="alert", então o leitor de tela anuncia assim que ele aparece.
• Leve o foco até ele depois de um envio com erro (ref + tabIndex={-1}), para quem usa teclado começar pela lista e não pelo botão de enviar.
• Cada link foca o próprio controle, não só o rótulo, então dá para digitar na hora.
• Mantenha também o FieldError em cada campo: o resumo é o mapa, o campo diz o que mudar.

RelacionadosCopy Anchor Link