Overview

Key Features

• Label Placement: Supports label placement before or after the checkbox.
• Accessibility: Fully keyboard and screen-reader accessible.

Anatomy

1. Checkbox: An interactive element that lets users select or deselect one or multiple options from a list.
2. Label: Text that clearly describes the purpose of the checkbox.
3. Description Text (optional): Additional context or instructions about what the checkbox controls.

Component States

A toggle has two component states: On, where the condition is enabled, and Off, where it is disabled. These states determine whether a setting or feature is applied.

Label Placement

The label can be placed before or after the toggle, allowing for flexible positioning.

Look and Feel

States

States define how the component behaves and appears in different interactions:

• Default: The standard appearance when inactive
• Hover: Highlights the field when the user hovers over it
• Focus: Indicates active input with a visible focus indicator.
• Disabled: Prevents interaction and input, appearing visually subdued.
• Read-only: Displays content without allowing edits while maintaining a standard appearance.

Errors

Errors communicate invalid input through clear visual cues to help users correct mistakes. The checkbox fill turns red, and an error message appears below to guide users in resolving the issue.

Best Practice

Do:

• Group related checkboxes together with a clear heading when part of a set.
• Provide a clear, descriptive label that explains the checkbox’s purpose
• Use a “Select All” option when appropriate, making it easy to choose all items at once.

Don’t:

• Don’t use a single checkbox for binary choices—use a toggle switch instead.
• Don’t auto-select checkboxes unless there is a clear reason, like for default preferences.
• Don’t mix checkboxes with radio buttons— each has a distinct function.

Links

The latest UI designs are in the Figma file, while the components are available in Storybook — a visual workspace where UI elements can be viewed and interacted with like a live demo, while being coded, tested, and documented in isolation. Supported stacks include Web Component, Blazor, Angular, React, and VueJS, linked below.

Feedback

Have feedback, an idea, or a bug to report? Head over to our Contributions page.