Government of Spain Dintel Standardized Design of Electronic Procedures Start First steps Foundations Components Modules Templates Tokens Support

Checkbox

Check boxes or checkboxes are used when there is an option to select multiple items from a list. Users can select zero, one or any number of items.

Preview

Figma
preview checkbox

Uses

When to use

In full-page forms, manners or side panels. In page filters, menu or within a component. In data tables for batch editing. On pages of terms and conditions to indicate if you agree to the terms. In the password reminder for the login. In lists with subselections.

When not to use

If only one option can be selected from the list, the option button must be used so that the user can select only one option.

Behaviour

Types of check boxes

Display of the component checkbox
Simple
Display of the component checkbox button
Button

Orientation

Display of the horizontal checkbox list component
Horizontal
isualisation of the vertical checkbox list component
Vertical

Types of check boxes in forms

Display of the check box without text
No text
Display of the check box with text
With text

States

Display of the component checkbox by default
Default
Display of the component checkbox in hover state
Hover
Visualization of the component checkbox in focused state
Focus
Display of the checkbox component in the selected state
Select
Display of the component checkbox in partial selection state
Select All
Display of the checkbox component in a disabled state
Disabled
Display of the checkbox component in selected state disabled
Select Disabled
Display of the checkbox component in a disabled state with partial selection
Select All Disabled
Display of the component checkbox with error
Error

Accessibility

This component has been validated to meet the accessibility requirements of UNE-EN 301549:2022, which includes the criteria of WCAG 2.1 (AA), however, changes in content and styles can affect accessibility compliance. We must make sure to review and follow the guidelines in this section when you update or add new content or style to this component.

The label property of the checkbox has role="checkbox". The aria-label attribute is set in the element with role="checkbox". When checked, the checkbox element has the aria-checked status set to true. While when it is not, it is set to false. If the checkbox or checkbox group includes relevant additional descriptive static text, it has the aria-describedby property set in the ID of the element containing the description. Used to indicate the identification of a component that contains descriptive text/help related to the checkbox. The disabled property renders the checkbox component disabled. This prevents users from interacting with the checkbox and transmits their inactive status to assistive technologies.