Los Inputs de texto son elementos fundamentales de cualquier formulario en línea. Permiten a los usuarios ingresar información textual en campos de entrada específicos, como nombres, correos electrónicos, mensajes y otros tipos de datos de entrada similares. Además, estos elementos también pueden tener características adicionales, como marcadores de posición y estados especiales, como el estado deshabilitado y el estado de error. En esta sección de la documentación, exploraremos cada uno de estos elementos y sus características para ayudarte a diseñar y desarrollar formularios en línea efectivos y accesibles.
Color | Contraste / Blanco | Contraste / Negro |
---|---|---|
Verde éxito #00AA00 |
3.11:1
check_circle |
6.75:1
check_circle check_circle |
Amarillo advertencia #E3AE00 |
2.03:1
cancel |
10.32:1
check_circle check_circle |
Rojo error #F24F4F |
3.5:1
check_circle |
6.01:1
check_circle check_circle |
Celeste info #0176DE |
4.52:1
check_circle check_circle |
4.65:1
check_circle check_circle |
cancel Contraste no cumple con lo mínimo requerdio por el estandar WCAG 2.0
check_circle Cumple con el estandar WCAG 2.0 AA para textos desde 14px bold en adelante*
check_circle check_circle Cumple con el estandar WCAG 2.0 AA para textos desde 14px regular hasta 10px regular*
*Utilizando la tipografía Roboto
Input de texto normal
Ejemplo:
Input de texto con estado deshabilitado
Ejemplo:
Input de texto con error
Ejemplo:
Input de texto con advertencia
Ejemplo:
Input de texto con éxito
Ejemplo:
Input de area de texto normal
Ejemplo:
Input de area de texto deshabilitado
Ejemplo:
Input de area de texto con estado de error
Ejemplo:
Input de area de texto con estado de advertencia
Ejemplo:
Input de area de texto con estado de error
Ejemplo: