Checkboxes y Radio


Los componentes de entrada de formulario como los Radio button y Checkbox son elementos clave en el diseño de formularios en línea eficientes y accesibles. Los Radio button permiten a los usuarios seleccionar una sola opción de un conjunto de opciones predefinidas, mientras que los Checkbox permiten a los usuarios seleccionar múltiples opciones de un conjunto de opciones predefinidas. Estos componentes se utilizan comúnmente en una variedad de formularios en línea, desde formularios de registro hasta encuestas en línea y cuestionarios.

  • 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

Checkbox

Checkbox normal

Ejemplo:

Checkbox con estado deshabilitado

Ejemplo:

Checkbox con estado de error

Ejemplo:

Radio

Radio normal

Ejemplo:

Radio con estado deshabilitado

Ejemplo:

Radio con estado de error

Ejemplo:

Radio con estado de advertencia

Ejemplo:

Radio con estado de éxito

Ejemplo:

Switch

Switch normal

Ejemplo:

Switch con estado deshabilitado

Ejemplo:

Switch con error

Ejemplo: