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 https://9ui.dev/r/checkbox

Usage

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

Examples

With Label

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

Disabled

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

Error

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