Exemplos funcionais de React Hook Form para testar na própria página: validação com Zod, checagens assíncronas, field arrays, um wizard de várias etapas, upload de arquivo, Controller e server actions do Next.js.
O React Hook Form cuida de formulários React com inputs não controlados: chame useForm, espalhe register("name") em cada input e envolva sua função de envio em handleSubmit. Adicione zodResolver para validar com um schema Zod. Os formulários abaixo rodam nesta página: regras, Zod, checagens assíncronas, field arrays, um wizard, upload de arquivo e server actions.
Instalação
Preencha cada demo, envie com erros e depois corrija. O código ao lado é o que está rodando. Os erros são ligados aos inputs com aria-describedby e anunciados com role="alert", então os formulários também funcionam com leitor de tela.
O React Hook Form renderiza menos porque os inputs ficam não controlados e ele lê os valores por refs. O Formik guarda cada valor no estado do React. Em formulários grandes, o React Hook Form costuma ser mais rápido e exigir menos código.
Instale zod e @hookform/resolvers, defina um schema z.object e passe resolver: zodResolver(schema) para useForm. Use z.infer<typeof schema> como tipo do formulário, e as mensagens de erro vêm do schema.
Chame reset() dentro do handler de envio depois que o salvamento der certo, ou passe novos valores com reset(values). reset também pode ser chamado em um effect quando isSubmitSuccessful virar true.
Inputs HTML retornam texto. Registre com valueAsNumber: true, ou use z.coerce.number() em um schema Zod, para obter um número de verdade.
Sim. O shadcn/ui traz um componente Form construído sobre o Controller do React Hook Form. Nosso guia de formulários e tabelas com shadcn mostra o passo a passo com um exemplo ao vivo.
As partes da API que você mais vai usar
register conecta um input pelo nome e aceita regras no estilo HTML. errors guarda uma mensagem por campo depois de um envio que falhou.
Um único schema fornece as regras de validação, as mensagens de erro e o tipo TypeScript. refine verifica dois campos juntos, e path diz qual campo recebe o erro.
Uma função validate pode retornar uma promise. Retorne true quando o valor estiver certo, ou uma string para exibir como erro. Combine com o mode onBlur para que não rode a cada tecla.
useFieldArray gerencia uma lista dentro do formulário. Use field.id como key, nunca o índice, para que o React mantenha cada input na linha certa.
Mantenha um único formulário para todas as etapas e chame trigger com os campos da etapa atual antes de avançar. Os valores das etapas anteriores ficam no formulário, então o envio final tem tudo.
Um input de arquivo é registrado como qualquer outro; o valor dele é uma FileList. Verifique tamanho e tipo em validate e envie o arquivo com FormData.
Inputs que não expõem uma ref, como muitos seletores de data e selects personalizados, se conectam pelo Controller. Ele passa value e onChange para o seu componente.
Valide no navegador para um retorno rápido e de novo no servidor, porque o navegador pode ser contornado. Compartilhar um único schema Zod mantém os dois em sintonia; setError mostra problemas do servidor no campo certo.
Precisa de um formulário HTML simples? Veja
Enviado:
Informe seu nome
Informe seu e-mail
Esse e-mail parece errado
Enviando...
Enviar
Informe um e-mail válido
Pelo menos 8 caracteres
As senhas não coincidem
Senha
Confirmar senha
Criar conta
Esta demo simula o servidor com uma espera curta. Já usados: admin, studio, hello.
Nome de usuário
Escolha um nome de usuário
Esse nome de usuário já está em uso
Verificando...
Reservar
Criação de logo
Nome do item {n}
Quantidade do item {n}
Item
Remover
Adicionar item
Salvar
Obrigatório
Etapa {n} de {total}
Empresa
Tamanho da equipe
Plano
Escolha
Inicial
Equipe
Preencha os campos destacados.
Voltar
Próximo
Concluir
Logo (PNG ou JPG, até 2 MB; fica no seu navegador)
Escolha um arquivo
Máximo de 2 MB
Só PNG ou JPG
Enviar
No mínimo 10
Orçamento:
Comece grátis · Sem cartão de crédito