Placeholder vs etiqueta: por qué el texto de ayuda no es una etiqueta, y la especificación de campo que debes usar
El texto gris dentro de un campo desaparece en cuanto alguien escribe. Por qué un placeholder no puede reemplazar a una etiqueta, dónde van las pistas, el color de borde que aprueba y la especificación exacta para tu desarrollador.
Un placeholder no es una etiqueta. Desaparece en cuanto alguien escribe, y con él se va la única pista de para qué servía el campo. Pon una etiqueta real sobre cada campo, las pistas debajo, un borde visible alrededor, y usa el placeholder solo para un ejemplo. Aquí va el porqué y la especificación exacta.
Qué sale mal cuando el placeholder es la etiqueta
Antes de escribir: se ve limpio
✕ Después de escribir: ¿para qué era este campo?
El campo de la izquierda se ve ordenado, y por eso les encanta a los diseñadores. El de la derecha es el mismo campo dos segundos después. La palabra "Correo" ya no está, así que la persona no tiene una etiqueta que consultar, y en un formulario largo no sabe qué respuesta corresponde a qué campo.
Es un problema de memoria, no de gusto. La investigación de Nielsen Norman Group sobre los placeholders en campos de formulario encontró que el texto que desaparece sobrecarga la memoria a corto plazo y dificulta revisar las respuestas antes de enviar. Nuestra guía más amplia de buenas prácticas de diseño de formularios cubre el formulario entero; este paper profundiza en la decisión que causa la mayoría de los problemas.
Hay un segundo problema. El texto del placeholder es gris por defecto, y ese gris suele ser demasiado tenue. El gris habitual #8E8E93 tiene un contraste de aproximadamente 3,3 a 1 sobre blanco, por debajo del 4,5 a 1 que WCAG pide para el texto. Así que la única pista que diste además es difícil de leer.
Solución 1: una etiqueta real, sobre el campo
Correo
✓ Etiqueta arriba: sigue ahí después de escribir
Correo de trabajo
✓ Placeholder solo como ejemplo
Una etiqueta está fuera del campo, así que escribir nunca la toca. Ponla sobre el campo, alineada a la izquierda, a 15 px en semibold. Arriba es mejor que al lado porque funciona en todos los anchos, incluido un móvil, y el ojo baja por el formulario en una línea recta.
No ocultes la etiqueta para ahorrar espacio. Si un diseño no tiene sitio para etiquetas, el diseño está mal, no la regla. Las etiquetas flotantes que se encogen a la esquina al enfocar son un compromiso: mantienen la etiqueta, pero son pequeñas, necesitan una sincronización cuidadosa y son más difíciles de construir de forma accesible que una etiqueta simple arriba.
Una etiqueta real es además lo que anuncian los lectores de pantalla. En HTML, conéctala al campo para que al tocar la etiqueta se enfoque el input:
<label for="email">Email</label>
<input id="email" name="email" type="email" autocomplete="email"
placeholder="name@company.com" />
Solución 2: las pistas van bajo el campo
Contraseña
Al menos 8 caracteres.
✓ Pista bajo el campo: se queda mientras se escribe
✕ Pista como placeholder: desaparece con la primera tecla
Lo más útil que puede decir un campo, como un formato o una regla, es lo que la gente necesita mientras escribe. Por eso no puede vivir en el placeholder, donde desaparece con la primera pulsación. Muévelo bajo el campo, a 13 px en un gris más discreto, donde se queda visible todo el tiempo.
Los errores usan el mismo espacio. Cuando algo sale mal, la línea de la pista puede convertirse en el mensaje de error, lo que mantiene el diseño estable. Nuestro paper sobre el color de los mensajes de error cubre cómo debe verse ese mensaje.
Solución 3: un borde que la gente pueda ver
Correo
✕ Borde #E5E5E5: un fantasma
Correo
✓ Borde #79747E: fácil de encontrar
Un campo es un control, y un control tiene que poder encontrarse. El borde gris fantasma de la izquierda es un favorito de los archivos de diseño, porque se ve ligero. En una pantalla real casi desaparece, y la gente no sabe dónde tocar.
WCAG 1.4.11 pide que la información visual necesaria para identificar un componente de interfaz tenga al menos 3 a 1 contra el color que tiene al lado. #E5E5E5 sobre blanco es aproximadamente 1,3 a 1, lo que suspende. #79747E, que es el color de contorno de Material 3, es aproximadamente 4,6 a 1, lo que aprueba con holgura. Usa 1,5 px para que aguante también en pantallas de baja densidad.
Ojo con la diferencia respecto a los divisores. Un gris claro como #E5E5EA está bien entre filas de una lista, porque un divisor solo tiene que notarse. El borde de un campo tiene que verse. Hablamos de los grises de divisores y superficies en color de fondo del modo claro.
Solución 4: pide el teclado correcto
Un campo que sabe para qué sirve puede abrir el teclado que ayuda, tanto en iPhone como en Android. Un campo de correo que se abre con la tecla @ lista ahorra un toque y evita un error de escritura. En HTML es un solo atributo:
| Campo | Tipo de input | Qué abre el teléfono |
|---|---|---|
| Correo | type="email" | Teclado con @ y . |
| Teléfono | type="tel" | Teclado numérico |
| Sitio web | type="url" | Teclado con / y .com |
| Tarjeta o código | inputmode="numeric" | Teclado numérico, sin spinner |
| Búsqueda | type="search" | Tecla de búsqueda en el teclado |
Combínalo con valores de autocomplete como email y name, para que el teléfono pueda rellenar el campo solo.
La especificación del campo
| Parte | Valor |
|---|---|
| Etiqueta | Sobre el campo, 15 px, semibold |
| Campo | 48 px de alto, radio de 12 px |
| Borde | 1,5 px en #79747E |
| Texto | 16 px, nunca menos |
| Pista | Bajo el campo, 13 px |
| Placeholder | Un ejemplo, o nada |
El texto de 16 px importa en iPhone: Safari hace zoom en la página cuando alguien toca un campo con texto más pequeño, lo que parece un error.
.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; }
Los 48 px de alto dan un área táctil cómoda, y el radio de 12 px es una elección, no una regla: ajústalo a tu sistema y mantenlo igual en todos los campos.
FAQ
¿Debo usar un placeholder en lugar de una etiqueta?
No. Un placeholder desaparece cuando alguien escribe, así que el campo pierde su nombre. Pon una etiqueta visible sobre el campo y reserva el placeholder para un formato de ejemplo, o déjalo vacío.
¿Es accesible el texto del placeholder?
Rara vez por defecto. El texto del placeholder suele ser un gris claro con poco contraste, desaparece al escribir, y algunas herramientas de asistencia no lo tratan como una etiqueta. Una etiqueta real conectada al input es la opción accesible.
¿Dónde debe ir la etiqueta: arriba o dentro del campo?
Arriba, alineada a la izquierda. Funciona en cualquier ancho de pantalla, se queda visible mientras se escribe y el ojo sigue una línea recta por el formulario.
¿Qué debo poner en un placeholder?
Un ejemplo del formato, como nombre@empresa.com, o nada en absoluto. Nunca pongas ahí la instrucción que la gente necesita mientras escribe. Eso va en una pista bajo el campo.
¿De qué color debe ser el borde de un input?
Lo bastante oscuro para alcanzar al menos 3 a 1 contra la página, como exige WCAG 1.4.11. #79747E, el color de contorno de Material 3, es aproximadamente 4,6 a 1 sobre blanco. Un #E5E5E5 pálido es aproximadamente 1,3 a 1 y suspende.
¿Las etiquetas flotantes arreglan el problema del placeholder?
En parte. Mantienen una etiqueta visible al encogerla sobre el texto, pero el tamaño pequeño, la animación y el trabajo de accesibilidad hacen que una etiqueta simple sobre el campo sea la opción por defecto más segura.
Fuentes
- Nielsen Norman Group, Placeholders in Form Fields Are Harmful (Katie Sherwin, 2014): el texto del placeholder desaparece al escribir, sobrecarga la memoria a corto plazo y dificulta revisar las respuestas.
- WCAG 2.1, 1.4.11 Non-text Contrast (3 a 1 para componentes de interfaz) y 1.4.3 Contrast (Minimum).
- Ratios sobre blanco, calculados con la fórmula de luminancia relativa de WCAG: #E5E5E5 1,26 a 1, #79747E 4,55 a 1, gris de placeholder #8E8E93 3,26 a 1. #79747E es el Outline de Material 3 (NeutralVariant50), leído de androidx Compose ColorLightTokens.
- MDN, the input element, type attribute:
type="email"abre un teclado de correo en los teléfonos. - Los tamaños de campo de la tabla de especificación (etiqueta de 15 px, alto de 48 px, radio de 12 px, pista de 13 px) son recomendación propia, no un valor de plataforma.
- Publicado por primera vez como carrusel en 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
