Checkbox
A control that allows the user to toggle between checked and not checked.
Installation
npm i @radix-ui/react-checkbox @radix-ui/react-labelUsage
1
2
3
4
5
6
7
8
9
10
11
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
export function CheckboxDemo() {
return (
<div className="flex items-center space-x-2">
<Checkbox id="terms" />
<Label htmlFor="terms">Accept terms and conditions</Label>
</div>
)
}Examples
Disabled
With Text
You agree to our Terms of Service and Privacy Policy.
Receive emails about your account activity.
Different Sizes
Controlled
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// Controlled checkbox example
import { useState } from "react"
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
export function ControlledCheckbox() {
const [checked, setChecked] = useState(false)
return (
<div className="flex items-center space-x-2">
<Checkbox
id="controlled"
checked={checked}
onCheckedChange={setChecked}
/>
<Label htmlFor="controlled">
{checked ? "Checked" : "Unchecked"}
</Label>
</div>
)
}Checkbox Group
Props
| Prop | Type | Description |
|---|---|---|
| checked | boolean | The controlled checked state of the checkbox. |
| defaultChecked | boolean | The default checked state when uncontrolled. |
| onCheckedChange | function | Event handler called when the checked state 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 | The value given as data when submitted with a name. |