Tipo 01
Relleno (filled)
Fondo gris claro con línea inferior. Más visible.
Componentes Campos de texto
Campos de texto
Los campos de texto permiten escribir información: nombres, correos, mensajes. Son la base de todo formulario.
Uso
Úsalos cuando el usuario debe escribir algo que no se puede elegir de una lista.
- Datos libres: nombres, correos, comentarios
- Búsquedas
- Opciones conocidas y pocas: usa opciones o un menú
- Fechas cercanas: usa un selector de fecha
Principios
1
Visibles
Se ve claramente dónde escribir.
2
Etiquetados
La etiqueta nunca desaparece; sube al escribir.
3
Útiles
Ayuda y errores aparecen justo debajo del campo.
Tipos
Tipo 02
Delineado (outlined)
Borde completo. Más sobrio, ideal para formularios largos.
Escribe un correo válido
Tipo 03
Con error
El borde y el texto de ayuda cambian a rojo.
Opcional0/120
Tipo 04
Área de texto con contador
Varias líneas y un contador de caracteres.
Anatomía
Usa tu correo institucional23/60123456
- Contenedor
- Etiqueta
- Texto escrito
- Ícono final (opcional)
- Texto de ayuda o error
- Contador (opcional)
Comportamiento
- Al enfocar, la etiqueta sube y el borde toma el color principal.
- La validación aparece al salir del campo, no mientras se escribe.
- El contador se actualiza con cada carácter.
Medidas
| Medida | Valor de referencia |
|---|---|
| Alto | 56 dp |
| Margen interno lateral | 16 dp |
| Etiqueta | 16 sp en reposo, 12 sp al subir |
| Texto de ayuda | 12 sp, a 16 dp del borde |
| Radio (delineado) | 4 dp |
Medidas de Material Design 2 en dp (en web, 1 dp ≈ 1 px de CSS; en iOS, 1 pt). Son de referencia: verifícalas en la guía oficial antes de usarlas en una evaluación.
Accesibilidad
Etiqueta real
Error anunciado
aria-invalid="true" y aria-describedby al texto de error.
Autocompletar
autocomplete="email", "name"… ayuda a todos.