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.

Demo en vivo

<fieldset>
  <div class="rds-mb-l03">
    <input id="check" class="rds-checkbox" type="checkbox">
    <label for="check" class="rds-checkbox__label"><span class="rds-visually-hidden">Default with no label</span></label>
  </div>
  <div class="rds-mb-l03">
    <input id="check0" class="rds-checkbox" type="checkbox">
    <label for="check0" class="rds-checkbox__label"><span>Unselected Default</span></label>
  </div>
  <div class="rds-mb-l03">
    <input id="check3" class="rds-checkbox" type="checkbox" disabled>
    <label for="check3" class="rds-checkbox__label">Unselected Disabled</label>
  </div>
  <div class="rds-mb-l03">
    <input id="check1" class="rds-checkbox" type="checkbox" checked>
    <label for="check1" class="rds-checkbox__label">Selected Default</label>
  </div>
  <div class="rds-mb-l03">
    <input id="check4" class="rds-checkbox" type="checkbox" checked disabled>
    <label for="check4" class="rds-checkbox__label">Selected Disabled</label>
  </div>
    <div class="rds-mb-l03">
    <input id="check2" class="rds-checkbox rds-checkbox--error" type="checkbox">
    <label for="check2" class="rds-checkbox__label">Error</label>
  </div>
</fieldset>
<fieldset>
  <div class="rds-mb-l03">
    <input id="checki" class="rds-checkbox rds-checkbox--inverse" type="checkbox">
    <label for="checki" class="rds-checkbox__label"><span class="rds-visually-hidden">Default with no label</span></label>
  </div>
  <div class="rds-mb-l03">
    <input id="check0i" class="rds-checkbox rds-checkbox--inverse" type="checkbox">
    <label for="check0i" class="rds-checkbox__label"><span>Unselected Default</span></label>
  </div>
  <div class="rds-mb-l03">
    <input id="check3i" class="rds-checkbox rds-checkbox--inverse" type="checkbox" disabled>
    <label for="check3i" class="rds-checkbox__label">Unselected Disabled</label>
  </div>
  <div class="rds-mb-l03">
    <input id="check1i" class="rds-checkbox rds-checkbox--inverse" type="checkbox" checked>
    <label for="check1i" class="rds-checkbox__label">Selected Default</label>
  </div>
  <div class="rds-mb-l03">
    <input id="check4i" class="rds-checkbox rds-checkbox--inverse" type="checkbox" checked disabled>
    <label for="check4i" class="rds-checkbox__label">Selected Disabled</label>
  </div>
    <div class="rds-mb-l03">
    <input id="check2i" class="rds-checkbox rds-checkbox--error rds-checkbox--inverse" type="checkbox">
    <label for="check2i" class="rds-checkbox__label">Error</label>
  </div>
</fieldset>

Estados

  • Unselected Default
    Su estado por defecto
  • Unselected Hover
    Indica que es un elemento interactivo cuando el usuario hacer hover con su cursor
  • 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.