English 中文 العربية 日本語 Português

Multi-Step Forms Formulários em Várias Etapas

Última atualização: 2026-11-03

Multi-Step Forms Formulários em Várias Etapas

Um formulário em várias etapas equivale a um estado de etapa, renderização condicional da etapa atual e um único estado de formulário que guarda os dados de cada etapa. Cada etapa valida localmente antes de você prosseguir, a última etapa envia tudo de uma vez, e trocar de etapa nunca perde o que o usuário já digitou. Manter todo campo em um único objeto compartilhado é o que torna o botão de voltar de graça: a etapa muda, mas os dados simplesmente ficam onde estão e o usuário fica livre para corrigir uma resposta anterior.

GrupoPadrões de Componentes
TipoPadrão

ℹ️ Informação O editor transpila JSX para JavaScript e renderiza a UI real na sandbox; os componentes são montados automaticamente — sem render manual.

📝 Sintaxe

const [step, setStep] = useState(0)   // index of the current step
const [data, setData] = useState({})  // form data shared across steps

// conditionally render step number "step"; Back and Next only change step

Retorna：Sem valor de retorno; esta entrada descreve um padrão de codificação e não uma função.

▶ Exemplo

O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.

Saída：

"Next" só fica disponível depois que um nome é preenchido na etapa 1; uma vez que uma cidade é informada na etapa 2, o formulário pode ser enviado; a tela de confirmação resume os dados de ambas as etapas, e o indicador de etapas permanece visível na parte inferior.
▶ Experimente

💡 Pontos-chave

💡 Dica Mantenha os dados de todas as etapas em um único estado objeto para que trocar de etapa nunca os perca; usar disabled para a verificação por etapa é o jeito mais simples de fazer o usuário passar antes de avançar.
ℹ️ Informação Com muitas etapas, extraia a configuração para um array e renderize com map, ou eleve a etapa para um parâmetro de rota para que os usuários possam ir e voltar e compartilhar links.
⚠️ Aviso Recarregar a página perde tanto a etapa quanto os dados, então persista-os em sessionStorage ou envolva-os em um hook personalizado quando os usuários precisarem retomar mais tarde.
conditional-rendering dynamic-forms form-validation usestate
Mais casos em breve.

📚 Tutoriais Relacionados

Formulários e Componentes Controlados
Lição 7: como organizar o estado de um formulário em várias etapas.

❓ Perguntas Frequentes

P Os dados são perdidos ao trocar de etapa?
R Não. Contanto que cada etapa compartilhe o mesmo estado de formulário, a etapa só controla qual etapa é exibida e os dados ficam onde estão.
P Como construo um indicador de progresso de etapas?
R Percorra com map um array de configurações de etapas e compare o índice com a etapa atual para decidir o estilo de concluído, ativo ou não iniciado.
P Como valido tudo antes de enviar?
R Na última etapa, rode uma função validate sobre os dados de todas as etapas; se ela reportar erros, setStep volta para a etapa correspondente para destacá-los.
Web-Tutorial.com

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

100%