Componentes Índice de páginas
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 #
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 #
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 #
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 la etiqueta
<fieldset>y su<legend>. - Cada item del grupo es un
<input>contype=checkbox. Deben tener asociado un<label>a través de unidú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
Más información sobre los inputs en el apartado accesibilidad de formularios.
| 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.