Checkbox

View in Storybook

Explore interactive examples and all component variations in our Storybook.

The Checkbox component allows users to select one or more options from a set. Built on Radix UI's Checkbox primitive, it provides full accessibility support and customizable styling.

Basic Usage

Accept terms and conditions

Controlled Checkbox

Controlled checkbox

Status: Unchecked

Checkbox Group

Select your favorite frameworks:

React

Vue.js

Angular

Svelte

Selected: None

Indeterminate State

Select All (1/3)

Item 1

Item 2

Item 3

Disabled State

Disabled unchecked

Disabled checked

Form Integration

Subscribe to newsletter

I agree to the terms and conditions *

Receive marketing communications

Properties

Checkbox

Property	Type	Default	Description
checked	boolean | "indeterminate"	-	The checked state of the checkbox.
defaultChecked	boolean	-	The default checked state (uncontrolled).
onCheckedChange	(checked: boolean) => void	-	Callback fired when the checked state changes.
disabled	boolean	false	If true, the checkbox is disabled.
required	boolean	false	If true, the checkbox is required.
name	string	-	The name attribute for form submission.
value	string	-	The value attribute for form submission.
id	string	-	The id attribute for the checkbox.
className	string	-	Additional CSS classes.

Features

Accessibility

• Full keyboard navigation support (Space to toggle)
• Screen reader compatible with proper ARIA attributes
• Focus management and visible focus indicators
• Support for required and disabled states

States

• Checked - Selected state
• Unchecked - Default unselected state
• Indeterminate - Partially selected state (useful for "select all" scenarios)
• Disabled - Non-interactive state

Form Integration

• Works with form libraries and native forms
• Proper name/value attributes for form submission
• Validation support with required attribute

Common Use Cases

The Checkbox component is perfect for:

• Terms and conditions - User agreement checkboxes
• Settings panels - Enable/disable features
• Multi-select lists - Select multiple items from a list
• Filters - Apply multiple filter criteria
• Permissions - Grant/revoke access rights
• Preferences - User preference selections
• Bulk actions - Select all/none functionality

Best Practices

1. Always provide labels - Use proper label elements for accessibility
2. Group related options - Use fieldsets for checkbox groups
3. Clear descriptions - Make checkbox purposes obvious
4. Logical ordering - Order options in a meaningful way
5. Validate appropriately - Mark required checkboxes clearly
6. Handle indeterminate state - Use for parent/child relationships
7. Test with keyboard - Ensure full keyboard accessibility