Selector
Input tipo select: Es un elemento de formulario que permite a los usuarios seleccionar una opción de un menú desplegable de opciones. El menú desplegable se activa cuando el usuario hace clic en el cuadro de selección y muestra una lista de opciones para que el usuario elija. Las opciones en el menú desplegable se pueden organizar en una lista o en grupos, y se pueden incluir etiquetas para ayudar al usuario a comprender qué representa cada opción.
- 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
Selector
Ejemplo:
Ejemplo:
Ejemplo:
Ejemplo:
Ejemplo: