Como ele é
É um cartão branco com cinco etapas: identificação, contato, endereço, acesso e revisão. Quando há espaço, uma coluna escura à esquerda lista as etapas com bolinhas numeradas, que viram um sinal de confere quando concluídas, e uma barra de progresso; em larguras menores, sobra só uma barrinha no topo. Os campos ganham pontos e traços sozinhos enquanto a pessoa digita, o telefone mostra se é celular ou fixo e de qual estado, e o CEP pode preencher o endereço. Erros aparecem em vermelho, em português claro, ao sair do campo, e o foco vai para o primeiro problema.
Você pode estar procurando isto se pediu algo assim
- formulário de cadastro que valida CPF e CEP sozinho
- campo de CPF que coloca os pontos e o traço enquanto digito
- cadastro de paciente em etapas para minha clínica online
- buscar o endereço pelo CEP no formulário de inscrição
- formulário que aceita pessoa física e jurídica com CNPJ
- medidor de força da senha em português
- deixar o cadastro do meu app com cara de banco digital
- validar telefone com DDD certinho no formulário
Também chamado de
- formulário de cadastro
- multi-step form
- validação de CPF
- máscara de CPF e CNPJ
- busca de CEP
- wizard de cadastro
- form wizard
- sign-up form
Quando usar
- Cadastro de pacientes em telemedicina e clínicas
- Onboarding de clientes pessoa física e jurídica em SaaS e fintechs
- Inscrições e formulários públicos que precisam de endereço completo
- Fluxos em que erros de digitação de documento geram retrabalho
Quando evitar
- Públicos fora do Brasil, já que textos e regras são brasileiros
- Cadastros curtos, só com nome e e-mail, em que cinco etapas viram excesso
Como pedir para a sua IA
Monte um formulário de cadastro em etapas para o meu app com máscaras e validação de CPF, CNPJ, telefone com DDD, CEP com busca de endereço e senha com medidor de força, mensagens em português, foco no primeiro erro e cores da minha marca.
Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Despachante
Despachante busca o endereço pelo CEP automaticamente?
Despachante não faz chamadas de rede por conta própria. O componente descobre o estado pela faixa de CEP dos Correios e aceita uma função assíncrona na prop cepLookup, que você liga ao serviço de CEP que preferir; com ela, rua, bairro, cidade e UF são preenchidos e, se a pessoa ainda estiver no CEP, o foco segue para o número.
Despachante aceita o novo CNPJ alfanumérico?
Aceita. No cadastro de pessoa jurídica, Despachante usa a máscara alfanumérica e calcula os dígitos verificadores pela regra da Receita Federal para o CNPJ com letras, além de rejeitar sequências repetidas. Nos dados limpos, o documento sai em maiúsculas, sem pontos, barra ou traço.
Despachante funciona com teclado e leitor de tela?
Sim. Os campos de Despachante têm rótulo, mensagens de erro ligadas ao campo e marcação de inválido, o foco vai para o primeiro erro e uma região anunciada informa a etapa, a busca do CEP e a força da senha. O componente também respeita a preferência de menos movimento, desligando as animações de troca de etapa.
