Checkbox

Components

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

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

Simple

Button

Orientation

Horizontal

Vertical

Types of check boxes in forms

No text

With text

States

Default

Hover

Focus

Select

Select All

Disabled

Select Disabled

Display of the checkbox component in a disabled state with partial selection

Select All Disabled

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.