Diseño Normalizado de Trámites Electrónicos
Inicio
Primeros pasos
Primeros pasos
¿Qué es DINTEL?
Diseñadores
Desarrolladores
Recursos
Preguntas frecuentes
Fundamentos
Fundamentos
Color
Tipografía
Elevaciones
Espaciado
Retícula
Borde
Radio
Iconografía
Ilustraciones
Animación
Accesibilidad
Tokens de diseño
Contenidos digitales
Visualización de datos
Elementos de interfaz
Elementos de interfaz
Módulos
Plantillas
Componentes
Actualizaciones
Contacto
Elementos de interfaz
Componentes
Casilla de verificación
Casilla de verificación
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.
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
Simple
Button
Orientación
Horizontal
Vertical
Tipos de casillas de verificación en formularios
Sin texto
Con texto
Estados
Default
Hover
Focus
Select
Select All
Disabled
Select Disabled
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.
Este sitio web utiliza cookies propias y de terceros para ofrecer un mejor servicio. Si continúa navegando consideramos que acepta su uso.
