# Teclado numérico vs. teclado completo para input de CPF em dispositivos móveis

> Descubra como escolher o tipo de teclado correto para campos de CPF em dispositivos móveis e melhorar a experiência do usuário.

**Publicado:** 27/05/2024
**Autor:** Redação CPFHub.io
**URL:** https://cpfhub.io/blog/teclado-numerico-vs-teclado-completo-para-input-de-cpf-em-dispositivos-moveis

---


Para campos de CPF em dispositivos móveis, use `inputmode="numeric"` combinado com `type="text"`: isso exibe o teclado numérico puro em iOS e Android, mantém zeros à esquerda, permite formatação com pontos e hífen e reduz erros de digitação em até 67% em comparação com o teclado QWERTY completo.

## Introdução

A experiência de preenchimento de formulários em dispositivos móveis é um fator decisivo para taxas de conversão e abandono de cadastro. Quando o usuário precisa informar o CPF em um aplicativo ou site responsivo, o tipo de teclado exibido pode fazer a diferença entre uma experiência fluida e uma frustrante.

O CPF é composto exclusivamente por 11 dígitos numéricos (com formatação opcional de pontos e hífen). Isso significa que exibir um teclado completo (QWERTY) para esse campo é um erro de UX que aumenta o atrito, demora o preenchimento e potencializa erros de digitação. Guias de boas práticas como as da [OWASP](https://owasp.org) reforçam que a experiência do usuário em formulários de identidade influencia diretamente a taxa de abandono e a qualidade dos dados coletados.

---

## O problema do teclado errado

Quando um campo de CPF em um formulário mobile exibe o teclado QWERTY completo, o usuário enfrenta diversos problemas:

* **Mais toques necessários** -- O usuário precisa localizar os números na fileira superior do teclado, que são menores e mais difíceis de acertar.

* **Maior taxa de erros** -- Teclas pequenas e próximas a letras aumentam a probabilidade de digitação incorreta.

* **Experiência inconsistente** -- O usuário espera um teclado numérico para um campo que claramente aceita apenas números.

* **Aumento no tempo de preenchimento** -- Estudos de usabilidade mostram que o teclado numérico reduz o tempo de digitação de números em até 40%.

* **Maior abandono de formulários** -- Cada ponto de atrito no preenchimento contribui para o abandono do cadastro ou checkout.

---

## Tipos de teclado disponíveis em HTML

O HTML oferece diferentes atributos para controlar qual teclado é exibido em dispositivos móveis. Veja as principais opções para campos de CPF:

### inputmode="numeric"

O atributo `inputmode="numeric"` instrui o navegador a exibir um teclado numérico. Esta é a opção recomendada para CPF:

```html
<input
 type="text"
 inputmode="numeric"
 pattern="[0-9]*"
 maxlength="14"
 placeholder="000.000.000-00"
 id="cpf"
 name="cpf"
 autocomplete="off"
/>
```

Vantagens:

* **Exibe o teclado numérico** em iOS e Android.
* **Mantém o type="text"** -- permite formatação com pontos e hífen.
* **O atributo pattern** reforça a validação no lado do cliente.

### type="tel"

Outra opção comum é usar `type="tel"`, que exibe o teclado de discagem telefônica:

```html
<input
 type="tel"
 maxlength="14"
 placeholder="000.000.000-00"
 id="cpf"
 name="cpf"
/>
```

O teclado `tel` também é numérico, mas inclui caracteres como `+`, `*` e `#` que não são relevantes para CPF. Funciona como alternativa, mas `inputmode="numeric"` é semanticamente mais correto.

### type="number"

O `type="number"` deve ser evitado para CPF:

```html
<!-- NÃO RECOMENDADO para CPF -->
<input type="number" id="cpf" name="cpf" />
```

Problemas com `type="number"`:

* Remove zeros à esquerda (CPFs como 01234567890 perdem o zero).
* Não permite formatação com pontos e hífen.
* Exibe setas de incremento/decremento em navegadores desktop.
* Pode causar problemas de acessibilidade.

---

## Comparativo dos tipos de teclado

| Atributo | Teclado exibido | Permite formatação | Mantém zeros | Recomendado |
| --- | --- | --- | --- | --- |
| inputmode="numeric" | Numérico puro | Sim | Sim | Sim |
| type="tel" | Discagem telefônica | Sim | Sim | Aceitável |
| type="number" | Numérico com setas | Não | Não | Não |
| type="text" (sem inputmode) | QWERTY completo | Sim | Sim | Não |

---

## Implementação em frameworks populares

### React

```javascript
function CampoCPF({ value, onChange }) {
 const formatarCPF = (valor) => {
 const numeros = valor.replace(/\D/g, '').slice(0, 11);
 return numeros
 .replace(/(\d{3})(\d)/, '$1.$2')
 .replace(/(\d{3})(\d)/, '$1.$2')
 .replace(/(\d{3})(\d{1,2})$/, '$1-$2');
 };

 return (
 <input
 type="text"
 inputMode="numeric"
 pattern="[0-9]*"
 maxLength={14}
 placeholder="000.000.000-00"
 value={formatarCPF(value)}
 onChange={(e) => onChange(e.target.value.replace(/\D/g, ''))}
 autoComplete="off"
 />
 );
}
```

### React Native

```javascript
import { TextInput } from 'react-native';

<TextInput
 keyboardType="numeric"
 maxLength={14}
 placeholder="000.000.000-00"
 value={cpfFormatado}
 onChangeText={handleCPFChange}
/>
```

### Flutter

```dart
TextField(
 keyboardType: TextInputType.number,
 maxLength: 14,
 decoration: InputDecoration(
 hintText: '000.000.000-00',
 labelText: 'CPF',
 ),
 inputFormatters: [
 FilteringTextInputFormatter.digitsOnly,
 CpfInputFormatter(),
 ],
)
```

---

## Formatação automática durante a digitação

Além do teclado correto, a formatação automática do CPF enquanto o usuário digita melhora significativamente a experiência. O padrão de formatação é `000.000.000-00`.

Exemplo em JavaScript puro:

```javascript
function formatarCPF(input) {
 let valor = input.value.replace(/\D/g, '');
 valor = valor.slice(0, 11);

 if (valor.length > 9) {
 valor = valor.replace(/(\d{3})(\d{3})(\d{3})(\d{1,2})/, '$1.$2.$3-$4');
 } else if (valor.length > 6) {
 valor = valor.replace(/(\d{3})(\d{3})(\d{1,3})/, '$1.$2.$3');
 } else if (valor.length > 3) {
 valor = valor.replace(/(\d{3})(\d{1,3})/, '$1.$2');
 }

 input.value = valor;
}

document.getElementById('cpf').addEventListener('input', function() {
 formatarCPF(this);
});
```

---

## Validação completa: local + API

Após o preenchimento, o fluxo ideal combina validação local dos dígitos verificadores com validação remota via API:

### Etapa 1: Validação local

Verificar se o CPF tem 11 dígitos e se os dígitos verificadores estão corretos (algoritmo módulo 11). Isso é instantâneo e não consome consultas da API.

### Etapa 2: Validação via API

Após a validação local, enviar o CPF para a API da [**CPFHub.io**](https://www.cpfhub.io/) para confirmar o nome completo, data de nascimento e gênero do titular, com tempo de resposta de aproximadamente 900ms e conformidade com a LGPD.

```bash
curl -X GET https://api.cpfhub.io/cpf/12345678900 \
 -H "x-api-key: SUA_CHAVE_DE_API" \
 -H "Accept: application/json"
```

A resposta confirma o nome completo, data de nascimento e gênero do titular, permitindo verificar se os dados informados pelo usuário são consistentes.

---

## Acessibilidade e boas práticas

Ao implementar campos de CPF em dispositivos móveis, considere também:

* **Label descritivo** -- Sempre associe um `<label>` ao campo com texto claro como "CPF" ou "Número do CPF".

* **Mensagens de erro claras** -- Em vez de "Campo inválido", use "O CPF informado deve conter 11 dígitos".

* **Placeholder com formato** -- O placeholder `000.000.000-00` ajuda o usuário a entender o formato esperado.

* **Tamanho do campo** -- O campo deve ter largura suficiente para exibir o CPF completo formatado (14 caracteres).

* **Contraste adequado** -- Texto e placeholder devem ter contraste suficiente para leitura ao ar livre.

---

## Impacto nas métricas de negócio

A escolha correta do teclado pode parecer um detalhe menor, mas tem impacto mensurável:

| Métrica | Teclado QWERTY | Teclado numérico | Melhoria |
| --- | --- | --- | --- |
| Tempo de preenchimento | ~12 segundos | ~7 segundos | 42% mais rápido |
| Taxa de erro de digitação | ~15% | ~5% | 67% menos erros |
| Abandono no campo CPF | ~8% | ~3% | 63% menos abandono |

Esses números podem variar conforme o contexto, mas a tendência é consistente: teclados numéricos resultam em preenchimento mais rápido, com menos erros e menos abandono.

---

## Perguntas frequentes

### Qual a diferença entre inputmode="numeric" e type="tel" para campos de CPF?
O `inputmode="numeric"` exibe um teclado numérico puro (apenas dígitos de 0 a 9) em iOS e Android, enquanto `type="tel"` exibe o teclado de discagem telefônica que inclui caracteres adicionais como `+`, `*` e `#`. Para CPF, `inputmode="numeric"` com `type="text"` é a combinação ideal: teclado limpo, sem remoção de zeros à esquerda e com suporte a formatação com pontos e hífen.

### O inputmode="numeric" funciona em todos os navegadores e sistemas operacionais?
O suporte é amplo: Chrome, Safari, Firefox e Edge em iOS e Android reconhecem o atributo `inputmode` desde 2018. Em navegadores desktop, o atributo é ignorado (não afeta o comportamento do teclado físico). Para cobrir navegadores mais antigos, adicione `pattern="[0-9]*"` como fallback — alguns dispositivos iOS legados respondem melhor ao atributo `pattern` do que ao `inputmode`.

### Devo validar o CPF localmente antes de enviar para a API?
Sim, sempre. A validação local (algoritmo módulo 11 para os dígitos verificadores) é instantânea e gratuita, e filtra CPFs com formato inválido antes de consumir uma consulta do seu plano. O fluxo correto é: (1) usuário preenche o campo com teclado numérico, (2) formatação automática aplica máscara, (3) validação local verifica dígitos verificadores, (4) apenas CPFs válidos são enviados à API para verificação do titular.

### Como medir o impacto da mudança de teclado nas minhas métricas de conversão?
Configure um teste A/B: mantenha um grupo de usuários com o campo de CPF usando `type="text"` padrão (teclado QWERTY) e o outro com `inputmode="numeric"`. Meça tempo médio de preenchimento, taxa de erro (submissões com CPF inválido) e taxa de abandono no campo. Ferramentas como Google Analytics 4 com eventos customizados ou Hotjar permitem monitorar essas métricas com granularidade por dispositivo.

### Leia também

- [Como pedir CPF no checkout sem espantar o cliente](https://cpfhub.io/blog/como-pedir-cpf-no-checkout-sem-espantar-o-cliente)
- [Diferença entre validação de CPF e consulta de CPF: quando usar cada uma](https://cpfhub.io/blog/diferenca-entre-validacao-de-cpf-e-consulta-de-cpf-quando-usar-cada-uma)
- [Como evitar chargebacks usando validação de CPF no checkout](https://cpfhub.io/blog/como-evitar-chargebacks-usando-validacao-de-cpf-no-checkout)
- [Como validar CPF no frontend com React e API REST](https://cpfhub.io/blog/como-validar-cpf-no-frontend-com-react-e-api-rest)

---

## Conclusão

A escolha do tipo de teclado para campos de CPF em dispositivos móveis é uma decisão de UX que impacta diretamente a experiência do usuário e as métricas de conversão. O atributo `inputmode="numeric"` combinado com `type="text"` é a abordagem recomendada, pois exibe o teclado numérico sem sacrificar a capacidade de formatação.

Combinado com formatação automática durante a digitação e validação via API da [**CPFHub.io**](https://www.cpfhub.io/), esse campo se torna um ponto de coleta de dados robusto, rápido e confiável — com latência de ~900ms na confirmação do titular e conformidade com a LGPD.

Cadastre-se em [cpfhub.io](https://www.cpfhub.io/) — 50 consultas mensais gratuitas, sem cartão de crédito — e valide CPFs em tempo real nos seus formulários mobile hoje mesmo.