Construir formulários e estados de interação

Sem checagem no servidor, um cadastro aceita um telefone de dois dígitos, e a campanha de e-mail dispara meses depois para um endereço que nunca existiu. O formulário bem feito confere a mesma regra nos dois lados e desenha a tela do dado em quatro estados: vazio, carregando, erro e cheio.

Quem aprova o cadastro do site perde venda por campo mal pensado, e a regra escrita duas vezes discorda um dia: o dado passa numa porta e falha na outra. A saída é uma descrição única dos dados, importada pelas duas pontas, com os quatro estados provados num laboratório sem JavaScript.

O schema, a ficha que descreve tamanho, formato e obrigatoriedade de cada campo, como a especificação de uma peça, vive num arquivo só e alimenta as duas barreiras. Quando a checagem só roda no navegador de quem preenche, qualquer pedido enviado por fora da tela entra sem crítica. É assim que um endereço inexistente chega ao banco.

A barreira do navegador existe para conforto, porque avisa antes de a pessoa perder o trabalho de preencher tudo, e isso aparece na taxa de conclusão. A do servidor existe para controle, porque roda onde quem preenche não alcança; se você só puder escrever uma das duas, escreva a do servidor.

O critério 3.3.8 do WCAG 2.2, no nível AA, fecha a parte de acesso do formulário: teste cognitivo não pode ser a única forma de autenticação. Na prática, isso obriga a aceitar senha colada e a conviver com gerenciador de credenciais e chave de acesso.

Campo de senha que bloqueia colar reprova nesse critério e ainda empurra quem usa gerenciador para senha fraca digitada à mão.

O schema é escrito com um validador, e em 2026 são três. O Zod v4 ficou 57% menor e cerca de quatro vezes mais rápido que a versão anterior, com a variante Zod Mini em 3,94 kB. O Valibot pesa 1,37 kB e vence em tamanho. O ArkType lidera em velocidade porque compila a regra na hora.

Escolha o Zod por padrão, porque o ecossistema inteiro já o entende e o agente devolve código com ele sem você pedir. Troque para o Valibot quando cada kB pesar, como num formulário que abre em rede lenta, e para o ArkType só quando a validação estiver medida como gargalo.

A biblioteca de formulário, a peça pronta que guarda o que a pessoa digitou e conversa com o schema, é o react-hook-form na maioria dos projetos React. Ele trabalha com inputs não controlados: o navegador guarda o valor e o React só lê na hora de validar, sem redesenhar a tela a cada tecla.

A integração com o useActionState e o useFormStatus do React 19, os ganchos que sabem se o envio está rodando, mostra o botão ocupado sem código extra.

O TanStack Form 1.x entra no formulário complexo, com etapas e campos que dependem uns dos outros. No Angular 22, os Signal Forms fazem o mesmo papel com sinais e convivem com os Reactive Forms antigos enquanto a migração anda.

Parte da validação visual dispensa JavaScript. O seletor :user-invalid marca o campo errado só depois de a pessoa interagir com ele, e o :user-valid marca o certo. Um formulário que abre com todos os campos em vermelho antes da primeira letra digitada foi escrito com :invalid puro. É a origem do formulário que já nasce reclamando.

A propriedade field-sizing: content faz a caixa de texto crescer com o texto, sem barra de rolagem nem script. Ela entrou em Baseline Newly Available em 16 de junho de 2026, quando o Firefox 152 fechou o conjunto.

A accent-color pinta caixa de marcação e botão de opção com a cor da marca numa linha, sem redesenhar o controle nem perder teclado e leitor de tela. Os três constam na camada nativa consolidada do manual de setembro de 2026.

O dado que a pessoa entregou volta para a tela dela em outra hora, quase sempre por outro sistema. Toda tela de dados tem quatro estados: vazio, carregando, erro e cheio. O rascunho que o agente entrega sozinho desenha só o cheio, porque é o que aparece quando você testa com a própria conta.

Busque no servidor por padrão, porque a página chega com o texto pronto para buscador e assistente e a chave secreta fica fora do navegador. Suba a busca para o navegador só quando o dado mudar com o clique, como o carrinho.

No navegador, o TanStack Query ou o SWR guardam o cache, a cópia local de um dado já buscado, e mostram a cópia enquanto a nova busca roda. Histórico consultado sempre, como as vendas do mês, cabe no IndexedDB, o banco de dados do navegador, com a mesma regra: mostrar o antigo e revalidar depois.

O carregando mostra um esqueleto com a forma do conteúdo, e não uma roda girando; react-content-loader ou react-loading-skeleton fazem isso em React, e o laboratório acima faz em CSS puro. O erro mostra mensagem específica com botão de tentar de novo, porque sem esse texto a tela só gira sem fim.

O vazio explica o que fazer e oferece o primeiro passo, com o esqueleto de carregamento antes dele.

Antes de aprovar o cadastro, abra o painel de rede do navegador e repita o envio com um telefone de dois dígitos. Se o servidor aceitar o pedido, só existe a barreira do navegador, e qualquer requisição por fora da tela passa sem crítica.

Confira também os quatro estados de uma tela que busca dado, e tente colar a senha no campo de acesso. Campo que recusa a colagem reprova no critério 3.3.8.

O passo a passo para pedir formulário, upload, arrastar e editor

Pedido sem nome de biblioteca volta com uma opção que ninguém no time conhece, e pedido sem os quatro estados volta só com o caminho de sucesso. Quem pede formulário, upload, lista arrastável ou editor de texto prova o pedido nos quatro estados.

Um interceptador de rede força erro e demora antes de a API existir. Escreva o nome da biblioteca em cada pedido, para não receber uma opção desconhecida.

Você constrói e testa tudo isso antes de a API, a interface por onde um sistema entrega dado a outro, existir. Um interceptador de rede, o MSW, responde no lugar do servidor verdadeiro enquanto o ambiente é o de desenvolvimento e nos testes, e fica de fora da produção.

Depois de instalado, force dez segundos de atraso e confira se o tempo limite da tela dispara com mensagem, sem girar sem fim; force um erro do servidor, depois uma lista vazia. Os três caminhos aparecem numa tarde de teste, antes de qualquer chamado de suporte, e nenhum deles mostra tela branca.

O dado de exemplo leva nome brasileiro longo, como Maria Aparecida Gonçalves da Silva. É o texto longo que revela o cartão que estoura e o botão que quebra em duas linhas. Test User, com nove letras, esconde os dois defeitos.

Lista que a pessoa reordena com o dedo pede o dnd-kit, com seis kB, acessível por teclado, e que merece atenção acima de mil itens ao mesmo tempo. Quadro no tamanho do Jira ou do Trello, com colunas e colisão própria, pede o Pragmatic drag-and-drop, da Atlassian.

Upload de arquivo grande pede o Uppy 6, major publicada no início de setembro de 2026. O envio é resumível, retoma de onde parou se a conexão cair, por TUS e S3 multipart, e aceita origem variada, como Google Drive e câmera, pelo Companion. Abaixo disso, um input de arquivo nativo com aceite por tipo resolve a foto do perfil.

Paleta de comandos, aviso passageiro e gaveta do rodapé são cmdk, Sonner e Vaul, o trio padrão das stacks com shadcn. Tour de primeiro acesso é o driver.js, com cerca de cinco kB; o Shepherd.js entra só com lógica condicional rica, e cobra licença comercial fora da AGPL. O auto-animate anima a lista que muda, com uma linha.

Editor de texto é a decisão mais cara, porque trocar de editor depois de publicado é reescrita. O TipTap, headless, sem visual pronto, você desenha a barra, sobre o ProseMirror, é o padrão para CMS e para autoria colaborativa. Ele tem a melhor integração com o Yjs, a biblioteca que junta a edição de várias pessoas no mesmo documento.

O Lexical, da Meta, serve rede social, mensageria e React Native, onde o desempenho em escala pesa mais que o catálogo de plugins. Bloco no estilo Notion é o Plate, alinhado ao shadcn, ou o BlockNote, que já traz o arrastar de blocos pronto.

Para código, o CodeMirror 6 parte de 50 kB. O Monaco pesa de dois a cinco MB e só se justifica quando a pessoa passa a tarde escrevendo código na tela. O Shiki faz realce estático com a gramática do editor de código da Microsoft e integra com os dois.

As palavras da tela são conteúdo de design. A skill frontend-design, o arquivo de instruções que o agente lê antes de desenhar, publicado pela Anthropic no repositório anthropics/skills, resume a regra em quatro pontos.

Nomeie pelo que a pessoa entende: ela gerencia avisos em vez de configurar um webhook, o aviso automático que um sistema manda a outro. O botão diz o que acontece, Salvar alterações, e nunca Enviar. A ação mantém o nome no fluxo inteiro, e Publicar gera um aviso que diz Publicado.

O erro explica o que houve e como resolver, sem pedir desculpa e sem vagueza. A tela vazia convida a agir, com o primeiro passo escrito. Tudo em tom conversado, verbo simples e sentence case, só a primeira letra maiúscula.

Antes de aprovar a tela, ligue o interceptador só em desenvolvimento e nos testes, e force os três caminhos de falha. Releia cada botão e cada erro pela régua da escrita, e aprove só quando nenhum mostrar tela branca e nenhum pedir desculpa.

Num envio de documento pesado, o critério é a retomada: sem ela, um extrato de 40 MB volta ao começo a cada queda da rede, e é isso que o Uppy 6 resolve.