# Casilla de verificación. DESY. Sistema de diseño del Gobierno de Aragón.

## Componentes Índice de páginas

Componentes

# Casilla de verificación

Formularios

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

## Índice de apartados de esta página

-   [Anatomía](#anatoma)
-   [Variantes](#variantes)
-   [Tamaños](#tamaos)
-   [Accesibilidad](#accesibilidad)
-   [Buenas prácticas](#buenas-prcticas)

## Anatomía [#](#anatoma)

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 [#](#variantes)

Por defecto

Item 1

Item 2

Item 3

Condicional

Item 1

Subitem 1 

Item 2

Subitem 2 

Item 3

Subitem 3 

Con líneas divisoras

Item 1

Lorem ipsum dolor sit amet

Item 2

Lorem ipsum dolor sit amet

Item 3

Lorem ipsum dolor sit amet

### Por defecto [#](#por-defecto)

Es el que se recomienda usar en primera instancia.

### Condicional [#](#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 [#](#con-lneas-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 [#](#tamaos)

Tamaño base

Item 1

Item 2

Item 3

Tamaño pequeño

Item 1

Item 2

Item 3

### Tamaño base [#](#tamao-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 [#](#tamao-pequeo)

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 [#](#accesibilidad)

### Cómo funciona [#](#cmo-funciona)

-   Grupo rodeado con la etiqueta `<fieldset>` y su `<legend>`.
-   Cada item del grupo es un `<input>` con `type=checkbox`. Deben tener asociado un `<label>` a través de un `id` único
-   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](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/ "Se abre en pestaña nueva")

Más información sobre los inputs en el apartado [accesibilidad de formularios](componente-formularios.html#accesibilidad).

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 [#](#buenas-prcticas)

-   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.