Placeholder vs Label: por que o texto placeholder não é um label, e a especificação de campo para usar
O texto cinza dentro de um campo desaparece no instante em que alguém digita. Por que um placeholder não substitui um label, onde ficam as dicas, a cor de borda que passa no teste e a especificação exata de campo para entregar ao seu dev.
Um placeholder não é um label. Ele some no instante em que alguém digita, e com ele vai embora a única pista do que era aquele campo. Coloque um label de verdade acima de cada campo, as dicas abaixo dele, uma borda visível em volta, e use o placeholder só para um exemplo. Aqui está o porquê, e a especificação exata.
O que dá errado quando o placeholder é o label
Antes de digitar: parece limpo
✕ Depois de digitar: para que era este campo?
O campo da esquerda parece organizado, e é por isso que designers gostam dele. O da direita é o mesmo campo dois segundos depois. A palavra "E-mail" sumiu, então a pessoa não tem label para conferir, e num formulário longo ela não sabe qual resposta pertence a qual campo.
Isso é um problema de memória, não de gosto. A pesquisa do Nielsen Norman Group sobre placeholders em campos de formulário descobriu que o texto que desaparece sobrecarrega a memória de curto prazo e dificulta conferir as respostas antes de enviar. Nosso guia mais amplo de boas práticas de design de formulários cobre o formulário inteiro; este paper aprofunda a decisão que causa a maior parte da dor de cabeça.
Há um segundo problema. O texto placeholder é cinza por padrão, e esse cinza costuma ser claro demais. O cinza comum de placeholder #8E8E93 tem contraste de cerca de 3,3 para 1 no branco, abaixo dos 4,5 para 1 que a WCAG pede para texto. Ou seja, a única dica que você deu também é difícil de ler.
Correção 1: um label de verdade, acima do campo
✓ Label acima: continua lá depois de digitar
E-mail de trabalho
✓ Placeholder só como exemplo
O label fica fora do campo, então digitar nunca o toca. Coloque-o acima do campo, alinhado à esquerda, em 15 px semibold. Acima é melhor que ao lado porque funciona em qualquer largura, inclusive no celular, e o olho desce pelo formulário em linha reta.
Não esconda o label para economizar espaço. Se o design não tem espaço para labels, o design está errado, não a regra. Labels flutuantes que encolhem para o canto no foco são um meio-termo: mantêm o label, mas ficam pequenos, exigem timing cuidadoso e são mais difíceis de construir com acessibilidade do que um label simples acima.
Um label de verdade também é o que os leitores de tela anunciam. No HTML, conecte-o ao campo para que tocar no label dê foco ao input:
<label for="email">Email</label>
<input id="email" name="email" type="email" autocomplete="email"
placeholder="name@company.com" />
Correção 2: dicas ficam abaixo do campo
Senha
Pelo menos 8 caracteres.
✓ Dica abaixo do campo: fica enquanto a pessoa digita
✕ Dica como placeholder: some na primeira tecla
A coisa mais útil que um campo pode dizer, como um formato ou uma regra, é justamente o que a pessoa precisa enquanto digita. Então ela não pode morar no placeholder, onde desaparece na primeira tecla. Mova-a para baixo do campo, em 13 px num cinza mais discreto, onde fica visível o tempo todo.
Os erros usam o mesmo espaço. Quando algo dá errado, a linha da dica pode virar a mensagem de erro, o que mantém o layout estável. Nosso paper sobre cor de mensagem de erro mostra como essa mensagem deve ser.
Correção 3: uma borda que as pessoas enxergam
✕ Borda #E5E5E5: um fantasma
✓ Borda #79747E: fácil de achar
Um campo é um controle, e um controle precisa ser encontrável. A borda cinza fantasma da esquerda é queridinha dos arquivos de design, porque parece leve. Numa tela real ela quase desaparece, e as pessoas não sabem onde tocar.
A WCAG 1.4.11 pede que a informação visual necessária para identificar um componente de interface tenha pelo menos 3 para 1 em relação à cor ao lado. #E5E5E5 no branco dá cerca de 1,3 para 1, e reprova. #79747E, que é a cor de outline do Material 3, dá cerca de 4,6 para 1, e passa com folga. Use 1,5 px para que se sustente também em telas de baixa densidade.
Note a diferença para divisores. Um cinza claro como #E5E5EA funciona entre linhas de lista, porque um divisor só precisa ser notado. A borda de um campo precisa ser vista. Falamos dos cinzas de divisor e de superfície em cor de fundo no modo claro.
Correção 4: peça o teclado certo
Um campo que sabe para que serve pode abrir o teclado que ajuda, tanto no iPhone quanto no Android. Um campo de e-mail que abre com a tecla @ pronta economiza um toque e evita erros de digitação. No HTML é um atributo:
| Campo | Tipo de input | O que o celular abre |
|---|---|---|
type="email" | Teclado com @ e . | |
| Telefone | type="tel" | Teclado numérico |
| Site | type="url" | Teclado com / e .com |
| Cartão ou código | inputmode="numeric" | Teclado numérico, sem spinner |
| Busca | type="search" | Tecla de busca no teclado |
Combine isso com valores de autocomplete como email e name, para que o celular preencha o campo sozinho.
A especificação do campo
| Parte | Valor |
|---|---|
| Label | Acima do campo, 15 px, semibold |
| Campo | 48 px de altura, raio de 12 px |
| Borda | 1,5 px em #79747E |
| Texto | 16 px, nunca menor |
| Dica | Abaixo do campo, 13 px |
| Placeholder | Um exemplo, ou nada |
Texto de 16 px importa no iPhone: o Safari dá zoom na página quando a pessoa toca num campo com texto menor, o que parece um bug.
.field label { font: 600 15px/1.3 system-ui; display: block; margin-bottom: 6px; }
.field input {
height: 48px;
padding: 0 14px;
font-size: 16px;
border: 1.5px solid #79747E;
border-radius: 12px;
}
.field input::placeholder { color: #8E8E93; }
.field .hint { font-size: 13px; margin-top: 6px; }
A altura de 48 px dá uma área de toque confortável, e o raio de 12 px é uma escolha, não uma regra: siga o seu sistema e mantenha igual em todos os campos.
FAQ
Devo usar um placeholder no lugar de um label?
Não. Um placeholder desaparece quando alguém digita, e o campo perde o nome. Coloque um label visível acima do campo e guarde o placeholder para um exemplo de formato, ou deixe vazio.
O texto placeholder é acessível?
Raramente por padrão. O texto placeholder costuma ser um cinza claro de baixo contraste, some ao digitar, e algumas tecnologias assistivas não o tratam como label. Um label de verdade conectado ao input é a escolha acessível.
Onde o label deve ficar: acima ou dentro do campo?
Acima, alinhado à esquerda. Funciona em qualquer largura de tela, continua visível enquanto se digita, e o olho segue uma linha reta pelo formulário.
O que devo colocar num placeholder?
Um exemplo do formato, como nome@empresa.com, ou nada. Nunca coloque ali a instrução de que a pessoa precisa enquanto digita. Isso vai numa dica abaixo do campo.
Que cor deve ter a borda de um input?
Escura o bastante para chegar a pelo menos 3 para 1 contra a página, como exige a WCAG 1.4.11. #79747E, a cor de outline do Material 3, dá cerca de 4,6 para 1 no branco. Um #E5E5E5 pálido dá cerca de 1,3 para 1 e reprova.
Labels flutuantes resolvem o problema do placeholder?
Em parte. Eles mantêm um label visível ao encolhê-lo acima do texto, mas o tamanho pequeno, a animação e o trabalho de acessibilidade fazem de um label simples acima do campo o padrão mais seguro.
Fontes
- Nielsen Norman Group, Placeholders in Form Fields Are Harmful (Katie Sherwin, 2014): o texto placeholder desaparece ao digitar, sobrecarrega a memória de curto prazo e dificulta conferir as respostas.
- WCAG 2.1, 1.4.11 Non-text Contrast (3 para 1 para componentes de interface) e 1.4.3 Contrast (Minimum).
- Razões sobre branco, calculadas com a fórmula de luminância relativa da WCAG: #E5E5E5 1,26 para 1, #79747E 4,55 para 1, cinza de placeholder #8E8E93 3,26 para 1. #79747E é o Outline do Material 3 (NeutralVariant50), lido do androidx Compose ColorLightTokens.
- MDN, the input element, type attribute:
type="email"abre um teclado de e-mail nos celulares. - Os tamanhos de campo na tabela de especificação (label de 15 px, altura de 48 px, raio de 12 px, dica de 13 px) são recomendação nossa, não um valor de plataforma.
- Publicado originalmente como carrossel no UX Brainy.
Want every form in your product to feel this easy to fill in? Our team designs and builds product UI with the field details decided once.
Get Started
