Checkbox

Los checkbox se utilizan dentro de una interfaz para permitir al usuario seleccionar entre una o más opciones, incluidas todas o ninguna.

Cada checkbox es independiente de los demás dentro de una lista, es decir, que la selección de uno no afecta al resto.

Recomendaciones de uso

Usar los checkbox para ofrecer una selección binaria, como aceptar términos y condiciones.
Cuando se le da la posibilidad al usuario de seleccionar varias opciones.
Son recomendables cuando es importante que todas las opciones sean visibles.
Generalmente, se apilarán de manera vertical en una columna. Si existen más de 6 opciones, se podrán disponer en varias columnas, aunque en estos caso se recomienda utilizar un multiselect.
La etiqueta aparece a la derecha del chekbox.
La etiqueta de los checkbox comenzará con mayúsculas.
Use oraciones completas y breves para las etiquetas.

No utilices los checkbox para activar o desactivar una opción, en ese caso utiliza un switch.
Cuando solo se puede seleccionar una opción de una lista, en ese caso utiliza un radio buttons.

Dentro de los estados que caracterizan a los checkbox, seleccionado y deseleccionado, encontramos cuatro tipos de checkbox:

Stanby: es el checkbox habilitado.
Focus: te enfoca que checkbox vas a seleccionar o deseleccionar. Este tipo de estado es muy útil para las personas que trabajan con teclado.
Disabled: su estado es desactivado y no se puede seleccionar ni deseleccionar.
Error: el color rojo marca que ha ocurrido un error.

Checkbox

Nombre	Tamaño de fuente (px/rem)	Font-weight	Estilo
Checkbox:label L	17 / 1.063	Regular / 400	$body-default
Checkbox:label M	15 / 0.938	Regular / 400	$body-default
Checkbox:label S	14 / 0.875	Regular / 400	$body-default

Checkbox - magma