ui
GitHub

Checkbox

Displays a box that can be checked or unchecked by the user.

Docs
checkbox-demo.tsx
import { Checkbox } from "@/components/ui/checkbox"
 
export function CheckboxDemo() {
	return <Checkbox />
}

Installation

npx shadcn@latest add @9ui/checkbox

Usage

Imports
import { Checkbox } from "@/components/ui/checkbox"
Anatomy
<Checkbox />

Examples

With Label

checkbox-with-label-demo.tsx
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
 
export function CheckboxWithLabelDemo() {
	return (
		<Label className="flex items-center gap-2">
			<Checkbox id="accept" />
			Accept
		</Label>
	)
}

Disabled

checkbox-disabled-demo.tsx
import { Checkbox } from "@/components/ui/checkbox"
 
export function CheckboxDisabledDemo() {
	return <Checkbox disabled />
}

Error

checkbox-error-demo.tsx
import { Checkbox } from "@/components/ui/checkbox"
 
export function CheckboxErrorDemo() {
	return <Checkbox aria-invalid />
}