Casilla de verificación

Componentes

Las casillas de verificación o checkbox se utilizan cuando hay opción de seleccionar varios elementos de una lista. Los usuarios pueden seleccionar cero, uno o cualquier número de elementos.

Vista Previa

Figma

Usos

Cuándo usar

En formularios a página completa, modales o paneles laterales.

En filtros de página, menú o dentro de un componente.

En tablas de datos para edición por lotes.

En páginas de términos y condiciones para indicar si está de acuerdo con los términos.

En el recordatorio de contraseñas para el login.

En listas con subselecciones.

Cuándo no usar

Si sólo puede seleccionarse una opción de la lista, debe utilizarse el botón de opción para que el usuario pueda seleccionar sólo una opción.

Comportamiento

Tipos de casillas de verificación

Visualización del componente casilla de verificación

Simple

Button

Orientación

Horizontal

Vertical

Tipos de casillas de verificación en formularios

Sin texto

Con texto

Estados

Visualización del componente caja de verificación por defecto

Default

Hover

Visualización del componente caja de verificación en estado enfocado

Focus

Visualización del componente caja de verificación en estado seleccionado

Select

Visualización del componente caja de verificación en estado selección parcial

Select All

Visualización del componente caja de verificación en estado deshabilitado

Disabled

Visualización del componente caja de verificación en estado seleccionado deshabilitado

Select Disabled

Visualización del componente caja de verificación en estado deshabilitado con selección parcial

Select All Disabled

Error

Accesibilidad

Este componente ha sido validado para cumplir con los requisitos de accesibilidad la UNE-EN 301549:2022 en la que se engloban los criterios de la WCAG 2.1 (AA), sin embargo, los cambios del contenido y estilos pueden afectar al cumplimiento de la accesibilidad. Debemos de asegurarnos de revisar y seguir las directrices de esta sección cuando actualice o añada nuevo contenido o estilo a este componente.

La propiedad label del checkbox tiene role="checkbox".

El atributo aria-label esta establecido en el elemento con role="checkbox".

Cuando está marcado, el elemento checkbox tiene el estado aria-checked establecido en true. Mientras que cuando no lo esta, se establece en false.

Si el checkbox o grupo de checkboxes incluye texto estático descriptivo adicional relevante, tiene la propiedad aria-describedby establecida en el ID del elemento que contiene la descripción. Se usa para indicar la identificación de un componente que contiene texto descriptivo/ayuda relacionado con el checkbox.

La propiedad disabled hace que el componente checkbox esté deshabilitado. Esto evita que los usuarios puedan interactuar con el checkbox y transmite su estado inactivo a las tecnologías de asistencia.