Pular para o conteúdo
Faculdade PhorteDesign System

ResumoDeErros

Em andamento

O resumo de erros do padrão GOV.UK, no topo do formulário: um título que diz quantos problemas há e um link para cada campo com erro. Recebe o foco quando o envio falha — quem usa leitor de tela ouve o resumo uma vez, em vez de um alerta por campo — e cada link leva o foco ao campo.

Função
Formulário e ação
Também chamado de
resumo de erros, lista de erros, error summary, erros do formulário
Mora em
app/components/molecules/ResumoDeErros.tsx
Última mudança
2026-09-30
Ver como Markdown(abre em outra aba)Ficha no Storybook(abre em outra aba)

Prévia

A peça ao vivo, vinda da ficha, na largura escolhida. Em larguras fixas, ela roda num quadro do tamanho de uma tela de verdade.

Na largura da página: 0px

Pular a prévia
Variante Padrão, ao vivo — vem da ficha.Abrir sozinha(abre em outra aba)

Variantes na ficha

Lidas da ficha no build, na ordem do palco. Cada uma abre sozinha, sem o styleguide em volta — é o endereço que o palco carrega.

  1. Padrão
  2. Um erro
  3. No formulário

Quando usar

Em formulário com mais de um campo que pode dar erro ao enviar: contato, inscrição, matrícula.

Faça

  • Passe os erros na ordem dos campos na tela, cada um com o idDoCampo e a mensagem que diz como acertar.
  • Aumente a tentativa a cada envio que falha: é ela que manda o foco para o resumo.
  • Nos FormField do mesmo formulário, passe anunciarErro={false}: o resumo é o alerta; o erro continua ligado ao campo.
  • Acerte o nivelDoTitulo conforme a página (padrão h2).

Evite

  • Mostrar o resumo antes do primeiro envio: ele responde a uma tentativa, não à digitação.
  • Mensagem diferente no resumo e no campo: a pessoa lê uma e procura a outra.

Quando não usar. Em formulário de um campo só (a Newsletter): o erro do FormField, anunciado na hora, basta. Para uma mensagem sobre a página, não sobre campos, use o Alert.

Anatomia

As partes, na ordem em que o olho — e o teclado — passam.

  1. Caixa — Borda de 2px `--destructive` e fundo `--destructive-subtle`; recebe o foco e interrompe o leitor: `<div role="alert" tabIndex={-1}>`.
  2. Título — "Há um problema no formulário" ou "Há N problemas no formulário", com o ícone de alerta; nomeia a caixa.
  3. Links — Um por erro, com a mensagem do campo; levam o foco a ele.

Estados

Os estados que a peça tem no código, e o que muda em cada um.

Estados da peça e o que muda em cada um
EstadoO que muda
Sem erroNão aparece (e o título da página volta ao normal).
Um erroTítulo no singular.
Vários errosTítulo com a contagem e a lista.
FocoO anel de foco do sistema na caixa, depois do envio.

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Envio que falhaCom a tentativa nova, o resumo recebe o foco — testado na ficha.
Link de um erroO foco vai para o campo, e a página rola até ele — testado na ficha. Sem JavaScript, o href leva até lá.
Título da páginaCom prefixarTituloDaPagina (padrão), ganha "Erro: " enquanto houver erro, e volta ao normal depois — testado na ficha.

Relacionados