Checkbox
A control that allows the user to toggle between checked and not checked.
import { Checkbox } from '@/components/ui/checkbox';
export function CheckboxDefault() {
return <Checkbox />;
}
Installation
Usage
import { Checkbox } from "@/components/ui/checkbox"<Checkbox />Examples
Checked
import { Checkbox } from '@/components/ui/checkbox';
export function CheckboxChecked() {
return <Checkbox defaultChecked />;
}
Disabled
import { Checkbox } from '@/components/ui/checkbox';
export function CheckboxDisabled() {
return (
<div className='flex items-center gap-4'>
<Checkbox disabled />
<Checkbox disabled defaultChecked />
</div>
);
}
With Label
import { Checkbox } from '@/components/ui/checkbox';
import { Label } from '@/components/ui/label';
export function CheckboxWithLabel() {
return (
<Label>
<Checkbox />
Accept terms and conditions
</Label>
);
}