# Tabelião

Área para a pessoa assinar com dedo, caneta ou mouse, com linha de base, nome, data e exportação da assinatura.

> Tabelião é um componente exclusivo do THM Componentes para coletar assinaturas em termos e contratos. A pessoa assina com dedo, caneta ou mouse, e o traço engrossa ou afina conforme a velocidade e a pressão da caneta. Tem desfazer, refazer, limpar, exportação em PNG e SVG, modo somente leitura e a opção de digitar o nome.

- 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, Canvas 2D
- Interação: Mouse, Toque, Teclado
- URL: https://vibecode.thmtecnologia.com/componentes/tabeliao/

## Como ele é

Parece a linha de assinatura de um contrato de papel. Num cartão branco, uma área larga com pontilhado discreto traz um X, uma linha de base e, embaixo dela, o nome de quem assina e a data com a hora. Enquanto a área está vazia, aparece Assine aqui com o desenho de uma caneta. O traço sai em azul-marinho, fino nos movimentos rápidos e mais grosso nos lentos, com curvas suaves, como tinta de caneta. Acima, um seletor alterna entre desenhar e digitar o nome em letra cursiva; no rodapé ficam desfazer, limpar e os botões PNG e SVG.

## Você pode estar procurando isto se pediu algo assim

- “a pessoa assinar com o dedo na tela do celular”
- “campo de assinatura para o termo de consentimento”
- “coletar a assinatura do cliente no contrato pelo site”
- “quadro para assinar com o mouse e salvar como imagem”
- “assinatura digitada em letra cursiva para quem não consegue desenhar”
- “assinar o termo da teleconsulta no navegador”
- “salvar a assinatura em PNG ou SVG para anexar ao PDF”

## Também chamado de

signature pad, bloco de assinatura, campo de assinatura, signature canvas, assinatura na tela, draw signature

## Quando usar

- Termos de consentimento em teleconsultas e atendimentos de saúde
- Contratos, propostas e ordens de serviço assinados no navegador
- Aceite assinado em cadastros e no recebimento de entregas
- Exibição de assinaturas já salvas, no modo somente leitura

## Quando evitar

- Documentos que exigem certificado digital ICP-Brasil, pois o bloco registra o desenho, não um certificado
- Fluxos em que uma simples caixa de aceite basta

## Como pedir para a sua IA

```text
Adicione um bloco de assinatura ao termo de consentimento: traço com espessura variável para dedo, caneta e mouse, desfazer e limpar, linha com nome e data, exportação em PNG e SVG, opção de digitar o nome 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 Tabelião

### Tabelião funciona com o dedo no celular?

Funciona. Tabelião usa Pointer Events e bloqueia a rolagem sobre a área de assinatura, então o dedo desenha sem arrastar a página. Com caneta, o componente lê a pressão real e ignora a palma da mão encostada na tela. Em telas pequenas, os botões de desfazer e limpar ficam só com ícones.

### Como salvo a assinatura de Tabelião?

De três jeitos. Tabelião baixa PNG ou SVG pelos botões, expõe os métodos toPNG e toSVG, com recorte, escala, fundo e linha de base opcionais, e entrega pelo v-model os traços normalizados, que podem ser guardados e exibidos de novo depois, inclusive em modo somente leitura.

### Tabelião tem alternativa para quem não consegue desenhar?

Tem. Tabelião oferece o modo Digitar: a pessoa escreve o nome e escolhe entre três estilos de letra cursiva das fontes do sistema. A área de assinatura recebe foco pelo teclado, descreve o que contém para leitores de tela e aceita Ctrl+Z para desfazer.

## Componentes relacionados

- [Despachante](https://vibecode.thmtecnologia.com/componentes/despachante/): Cadastro em etapas que formata e confere CPF, CNPJ, telefone, CEP e senha enquanto a pessoa preenche.
- [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.
- [Rubrica](https://vibecode.thmtecnologia.com/componentes/rubrica/): Uma assinatura caligráfica que aparece traço a traço, como se uma caneta invisível escrevesse na tela.
- [Prancheta](https://vibecode.thmtecnologia.com/componentes/prancheta/): Editor de fotos dentro da página para recortar, girar, ajustar brilho e cor, aplicar filtros e exportar a imagem.
- [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.

---
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.