# Despachante Cadastro em etapas que formata e confere CPF, CNPJ, telefone, CEP e senha enquanto a pessoa preenche. > Despachante é um componente exclusivo do THM Componentes para cadastros brasileiros. Divide o formulário em etapas, aplica máscaras, confere os dígitos de CPF e CNPJ, inclusive o CNPJ alfanumérico, valida DDD, CEP, idade e força da senha, mostra uma revisão no fim e entrega os dados limpos. Serve para telemedicina, onboarding e cadastros públicos. - Categoria: Formulários e entrada - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript - Interação: Mouse, Toque, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/despachante/ ## 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 ```text 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. ## Componentes relacionados - [Cadeado](https://vibecode.thmtecnologia.com/componentes/cadeado/): Quadradinhos para digitar o código que chega por SMS, com colar inteiro, avanço automático e botão de reenviar. - [Folhinha](https://vibecode.thmtecnologia.com/componentes/folhinha/): Calendário em português com dois meses lado a lado para escolher data inicial e final, com atalhos e feriados. - [Tabelião](https://vibecode.thmtecnologia.com/componentes/tabeliao/): Área para a pessoa assinar com dedo, caneta ou mouse, com linha de base, nome, data e exportação da assinatura. - [Balcão](https://vibecode.thmtecnologia.com/componentes/balcao/): Pagamento em três etapas com QR Code do Pix, cartão parcelado e boleto, com o resumo do pedido ao lado. - [Malote](https://vibecode.thmtecnologia.com/componentes/malote/): Área para arrastar arquivos ou clicar e escolher, com um cartão que se levanta e a lista dos arquivos escolhidos. - [Tocha](https://vibecode.thmtecnologia.com/componentes/tocha/): Campo de texto cuja borda acende em azul no ponto por onde o cursor passa, como uma lanterna na moldura. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.