Inputs de texto


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.

  • Input text: Es un elemento de formulario que permite al usuario ingresar texto en un campo de texto en blanco. Por lo general, se utiliza para recolectar información textual como nombres, correos electrónicos, mensajes y otros tipos de datos de entrada similares.
  • Estado deshabilitado: Este estado se aplica a un campo de entrada de texto cuando no se permite que el usuario lo utilice. Por lo general, se utiliza para campos que no son aplicables o relevantes para el usuario, o para campos que solo pueden ser editados por ciertos usuarios o en ciertas circunstancias.
  • Estado de error: Este estado se aplica a un campo de entrada de texto cuando el usuario ha ingresado información incorrecta o incompleta. Por ejemplo, si un usuario omite un campo obligatorio o ingresa información en un formato incorrecto, se puede mostrar un mensaje de error junto al campo de entrada para indicar al usuario qué debe corregir.
  • Estado de advertencia: se utiliza para llamar la atención del usuario sobre una información ingresada o acción realizada en torno al input, que podría no sea un error, pero puede causar problemas si no se resuelve. Por ejemplo, cuándo se ingresa una contraseña insegura.
  • Estado de éxito: indica al usuario ha completado con éxito un formulario o un campo en particular. Se puede usar para dar comentarios positivos al usuario y alentarlo a continuar con el proceso de envío.

Paleta de Colores de Feedback

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

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

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 éxito

Ejemplo: