Checkbox

v1.0.0

A binary selection control with indeterminate state support, animated checkmark transitions, accessible labeling, and error state handling.

A simple checkbox with label and description. The label is clickable and the checkbox animates on state change.

Accept terms and conditions

You must agree before proceeding.

Subscribe to newsletter

Receive weekly updates about product changes.

Control the checked state externally. The parent component manages the value and responds to changes.

Enable dark mode

Toggle the application theme.

State: unchecked

Use the <code>indeterminate</code> prop to represent a mixed selection state, commonly used in tree or list headers.

Select all items

Bulk selection for batch operations.

Pass an <code>error</code> string to show destructive styling and an animated error message below the checkbox.

I agree to the terms of service

Please read the terms carefully.

You must accept the terms to continue.

I agree to the privacy policy

Data handling and processing terms.

Set the <code>disabled</code> prop to prevent interaction and apply reduced opacity styling.

Email notifications

Receive email alerts for account activity.

SMS notifications

This feature requires phone verification.

Accepted on January 15, 2025.

API Reference

Properties accepted by the binary selection control.

Property	Type	Default	Description
checked	boolean	undefined	Controlled checked state of the checkbox.
defaultChecked	boolean	undefined	Uncontrolled initial checked state on first render.
indeterminate	boolean	false	Visual indeterminate state for mixed selection in tree or list headers.
onCheckedChange	(checked: boolean) => void	undefined	Callback triggered when the checkbox state changes.
label	React.ReactNode	undefined	Primary label rendered beside the checkbox control. Clickable.
description	React.ReactNode	undefined	Secondary helper text rendered below the label.
error	string	undefined	Error message rendered with destructive styling and animated entrance.
disabled	boolean	false	Disables interaction and applies reduced opacity styling.