Casilla de verificación

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

Anatomía #

Se componen de una caja, un elemento cuadrado, 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.

Tipos #

Por defecto #

Es el que se recomienda usar en primera instancia.

Condicional #

Se usa en los casos en los que hay contenido adicional, por ejemplo, si al seleccionar la opción, el usuario debe introducir algún input. En este caso, debajo del radio se introduce una línea vertical que abraza el contenido adicional.

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.

Buenas prácticas #

• Por defecto, todas las casillas de verificación deben mostrarse sin selección o "vacías".
• Liste las opciones en un orden racional 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 a la caja, sino que también debe poderse seleccionar la opción pulsando en la etiqueta.