Interactive checkbox for boolean selections.
| Name | Type | Default | Description |
|---|---|---|---|
| checked | boolean | — | Controlled checked state |
| defaultChecked | boolean | — | Default checked state |
| disabled | boolean | — | Disable checkbox |
| Property | Token | CSS Variable | Description | |
|---|---|---|---|---|
| Border (Unchecked) | color.input | var(--input) | Unchecked border matches input fields | |
| Background | color.background | var(--background) | Unchecked background | |
| Border (Checked) | color.primary | var(--primary) | Checked border color | |
| Checked Background | color.primary | var(--primary) | Checked state background | |
| Check Mark | color.primary-foreground | var(--primary-foreground) | Check mark color | |
| Disabled Background | color.muted | var(--muted) | Disabled state background (grey) | |
| Disabled Text | color.muted-foreground | var(--muted-foreground) | Disabled checkmark color | |
| Focus Ring | color.ring | var(--ring) | Focus indicator |
A simple checkbox with a label.
<div className="flex items-center space-x-2">
<Checkbox id="terms" />
<Label htmlFor="terms" className="cursor-pointer">
Accept terms and conditions
</Label>
</div>Manage checkbox state externally with checked and onCheckedChange.
Current state: false
const [checked, setChecked] = useState(false);
<Checkbox
checked={checked}
onCheckedChange={setChecked}
/>Disabled checkboxes for read-only or unavailable states.
<Checkbox disabled /> <Checkbox disabled defaultChecked />
Group related checkboxes together in a fieldset.
<fieldset className="space-y-3">
<legend>Select folders to sync</legend>
{items.map((item) => (
<div className="flex items-center space-x-2">
<Checkbox
checked={item.checked}
onCheckedChange={(checked) => updateItem(item.id, checked)}
/>
<Label>{item.name}</Label>
</div>
))}
</fieldset>Add helper text below the checkbox for additional context.
Receive emails about new products, features, and more.
Receive alerts about your account security.
<div className="flex items-start space-x-2">
<Checkbox id="marketing" />
<div className="grid gap-1.5 leading-none">
<Label htmlFor="marketing">Marketing emails</Label>
<p className="text-sm text-muted-foreground">
Receive emails about new products and features.
</p>
</div>
</div>Checkbox with validation and error handling in a form.
<form onSubmit={handleSubmit}>
<Checkbox
checked={termsAccepted}
onCheckedChange={setTermsAccepted}
aria-invalid={hasError}
/>
{hasError && <FieldError>Please accept the terms</FieldError>}
<Button type="submit">Submit</Button>
</form>