Checkbox

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

Variaciones y tipos

  • Cada checkbox es independiente de los demás dentro de una lista, es decir, que la selección de uno no afecta al resto.
  • Se utiliza cuando se le da la posibilidad al usuario de seleccionar varias opciones.
  • Generalmente, se apilarán de manera vertical en una columna. Si existen más de 6 opciones, se podrán disponer en varias columnas.
  • La etiqueta de los checkbox comenzará con mayúsculas.

Composición

El componente de checkbox se compone de:

  • Checkbox label
    Describe la información que se quiere seleccionar o deseleccionar
  • Checkbox input
    Indica el estado correspondiente. Por defecto será siempre el unselected.

Estados

  • Unselected Default
    Su estado por defecto

  • Unselected Disabled
    Estado en el que se encuentra cuando la acción de decisión está bloqueada para los usuarios

  • Selected Default
    Estado seleccionado

  • Selected Disabled
    Estado seleccionado que no puede ser modificado por el usuario

Comportamiento

Los checkbox pueden tener una relación padre-hijo con otros checkbox.

  • Describe la información que se quiere seleccionar o deseleccionar
  • Si el padre no está marcado, los hijos tampoco lo están
  • Si algunos, pero no todos los hijos están seleccionados, el padre se convierte en un checkbox intedeterminado.

Alineación y orden

La etiqueta del checkbox siempre se sitúa a la derecha del input. Si hay un conjunto de checkbox, se pueden disponer de forma vertical o horizontal dependiendo del caso de uso y la estructura de la UI. Cuando sea posible organizar las agrupaciones de checkbox y radio button verticalmente para facilitar su lectura.

Usos

Este componente se utiliza frecuentemente en formularios. Éstos se pueden situar a página completa, en modales o en un panel lateral. Un checkbox también se puede utilizar para aceptar los términos y condiciones o para filtrar información.