Loading...
Loading...
The Checkbox component allows users to select one or more options from a set. Perfect for forms, filters, and multi-select scenarios.
Please read and accept the terms to continue
import { Checkbox } from '@/components/ui/checkbox';
import { Label } from '@/components/ui/label';
// Basic checkbox
<div className="flex items-center space-x-2">
<Checkbox id="terms" />
<Label htmlFor="terms">Accept terms</Label>
</div>
// Checked by default
<Checkbox id="default" defaultChecked />
// Controlled
const [checked, setChecked] = useState(false);
<Checkbox checked={checked} onCheckedChange={setChecked} />
// Disabled
<Checkbox disabled />