Checkbox
A control that allows users to select multiple items from a list of options.
Overview
The Checkbox component is used to allow users to select one or more items from a list of options, or to mark an item as checked or completed. Checkboxes are commonly used in forms, lists, and data tables.
Our Checkbox component is built with Radix UI primitives and follows WAI-ARIA best practices. It supports keyboard navigation, focus management, and screen reader announcements.
Basic Usage
The default Checkbox component provides a clean, accessible checkbox input.
Examples
Checkbox Group
Group multiple checkboxes together for related options.
Notify me about...
Checkbox States
Checkboxes can have different states to indicate their current status.
With Form
Use checkboxes within forms to collect multiple selections.
API Reference
The Checkbox component provides a way to select multiple options from a set.
| Prop | Type | Description |
|---|---|---|
| checked | boolean | Whether the checkbox is checked or not. Use with onCheckedChange for controlled usage. |
| defaultChecked | boolean | The default state of the checkbox when initially rendered. Use for uncontrolled usage. |
| onCheckedChange | function | Event handler called when the checked state changes. |
| disabled | boolean | When true, prevents the user from interacting with the checkbox. |
| id | string | A unique identifier for the checkbox. Used to associate with a label. |
The Checkbox component also accepts all standard HTML attributes for the button element.
Usage Guidelines
Follow these guidelines for effective use of the Checkbox component:
Best Practices
Do
- Use checkboxes for multiple selection from a list of options
- Group related checkboxes together
- Use clear, concise labels that describe the option
- Place labels to the right of checkboxes
- Use checkboxes for boolean (yes/no) settings
Don't
- Use checkboxes for mutually exclusive options (use radio buttons instead)
- Use checkboxes for actions or commands (use buttons instead)
- Create overly long lists of checkboxes without organization
- Use checkboxes without labels
- Use checkboxes for single-selection from a large list (use select instead)
Accessibility
The Checkbox component follows WAI-ARIA guidelines to ensure accessibility.
Keyboard Navigation
Users can navigate to checkboxes using the Tab key and toggle them using the Space key.
Screen Readers
The component uses proper ARIA attributes to communicate state changes to assistive technologies.
Accessibility Tip
Always associate checkboxes with labels using the htmlFor attribute that matches the checkbox's id. This ensures that users can click on the label to toggle the checkbox and that screen readers announce the label when the checkbox is focused.