Checkbox

A control that allows the user to toggle between checked and not checked.

Examples

Accept terms and conditions

Enable notifications

Remember me

Accept terms and conditions

Enable notifications

Remember me

Unsubscribe from emails

Remove from list

Exclude from results

Accept terms and conditions

By clicking this checkbox, you agree to the terms and conditions.

Enable notifications

You can enable or disable notifications at any time.

Property	Type	Default	Description
asChild	boolean	false	Change the default rendered element for the one passed as a child, merging their props and behavior.
defaultChecked	boolean	-	The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.
checked	boolean \| “indeterminate”	-	The controlled checked state of the checkbox. Must be used in conjunction with onCheckedChange.
onCheckedChange	(checked: boolean \| “indeterminate”) => void	-	Event handler called when the checked state of the checkbox changes.
disabled	boolean	-	When true, prevents the user from interacting with the checkbox.
required	boolean	-	When true, indicates that the user must check the checkbox before the owning form can be submitted.
name	string	-	The name of the checkbox. Submitted with its owning form as part of a name/value pair.
value	string	”on”	The value given as data when submitted with a name.
variant	”regular"	"regular”	The visual style of the checkbox.
size	”sm” \| “md” \| “lg"	"md”	The size of the checkbox.
uncheckIcon	boolean	false	When true, displays a minus icon instead of a check icon when checked.

Data attribute	Values
[data-state]	“checked” \| “unchecked” \| “indeterminate”
[data-disabled]	Present when disabled