DESY

Sistema de Diseño del Gobierno de Aragón.

Casilla de verificación

Este elemento ofrece la posibilidad de seleccionar varias opciones de las que se ofrecen.

Índice de apartados de esta página

Anatomía

Se componen de una caja y de una etiqueta con el nombre de la opción.

La alineación puede ser tanto en vertical como en horizontal, siendo preferible siempre que sea posible la alineación vertical.

Variantes

Por defecto
Condicional
Con líneas divisoras

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Por defecto

Es el que se recomienda usar en primera instancia.

Condicional

Se usa en los casos en los que hay contenido adicional. En este caso, una vez se marca la opción, despliega un input abrazado con una línea a la izquierda.

Con líneas divisoras

En general, no se recomienda su uso. Se emplea cuando el contenido es extenso y se requiere hacer una división visual de los elementos.

Tamaños

Tamaño base
Tamaño pequeño

Tamaño base

Utilizar por defecto para cualquier tipo de situaciones y layouts. Siempre que sea posible se recomienda usar este tamaño por motivos de accesibilidad.

Tamaño pequeño

Se recomienda su uso cuando el elemento estándar sea demasiado grande para el espacio donde debe de encajar, por ejemplo dentro de tablas, cards, grupos de filtros o similares.

Accesibilidad

Cómo funciona

Grupo rodeado con el elemento <fieldset> y su <legend>. Cada item del grupo es un <input> con type=checkbox. Deben tener asociado un <label> a través del id único del <input>.

Cuando se navega con teclado, la persona puede desplazarse por la lista con el tabulador y activar el item con la barra espaciadora.

Basado en el patrón checkbox de W3C

Más información sobre los inputs en el apartado accesibilidad de formularios.

Qué tener en cuenta
Qué usar Dónde Función
fieldset Parámetro Nunjucks dentro del componente Utiliza el legend de su interior como título. Debe ser visible.
idprefix Parámetro Nunjucks dentro del componente Permite las llamadas entre label, hint, error y el input. El propio componente se encarga de construir un id único para cada item.

Buenas prácticas

  • Por defecto, todas las casillas de verificación deben mostrarse deseleccionadas.
  • Liste las opciones en un orden racional y que tenga sentido para el usuario.
  • Si el conjunto de opciones es mayor a 5, es preferible emplear un elemento de selección o desplegable.
  • El input de entrada no debe limitarse al botón de caja. La persona también debe poder seleccionar la opción pulsando en la etiqueta.