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

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

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

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

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

Implementação em frameworks populares

React

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

import { TextInput } from 'react-native';

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

Flutter

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:

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

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:

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.

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, 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 — 50 consultas mensais gratuitas, sem cartão de crédito — e valide CPFs em tempo real nos seus formulários mobile hoje mesmo.