Standardized Design of Electronic Procedures
Home
First steps
First steps
What is DINTEL?
Designers
Developers
Resources
Frequently Asked Questions
Foundations
Foundations
Color
Typography
Box shadow
Spacing
Grid
Border
Border radius
Iconography
Illustrations
Animations
Accessibility
Design tokens
Writing guidelines
Data visualization
Interface elements
Interface elements
Modules
Templates
Components
Updates
Contact
Interface elements
Components
Checkbox
Checkbox
Checkboxes are used when there is an option to select multiple items in a list. Users can select zero, one or any number of items.
Uses
How to use
In full-page forms, modal or side panels.
In page filters, menu or within a component.
In data tables for batch editing.
On terms and conditions pages to indicate whether you agree to the terms.
In the password reminder for login.
In lists with sub-selections.
How not to use
If only one option can be selected from the list, the radio button should be used to allow the user to select only one option.
Behaviour
Checkbox types
Simple
Button
Orientation
Horizontal
Vertical
checkbox types in forms
Without text
With text
States
Default
Hover
Focus
Select
Select All
Disabled
Select Disabled
Select All Disabled
Error
Accessibility
This component has been validated to comply with the accessibility requirements of UNE-EN 301549:2022 which encompasses the criteria of WCAG 2.1 (AA), however, changes to content and styles may affect accessibility compliance. Be sure to review and follow the guidelines in this section when updating or adding new content or styling to this component.
The label property of the checkbox has role="checkbox".
The aria-label attribute is set on the element with role="checkbox".
The checkbox has an accessible label provided by the aria-labelledby attribute set on the element with role="checkbox".
When checked, the checkbox element has the aria-checked state set to true. When unchecked, it is set to false.
If it is a group of checkboxes, they are included in an element with role="group".
If the checkbox or group of checkboxes includes additional relevant descriptive static text, it has the aria-describedby property set to the ID of the element containing the description. Used to indicate the identification of a component containing descriptive text/help related to the checkbox.
The disabled property makes the checkbox component disabled. This prevents users from interacting with the checkbox and transmits its inactive state to assistive technologies.
This website uses own and third party cookies to provide a better service. If you continue browsing we consider that you accept its use.
