Checkbox
A control allowing the user to toggle between checked and not checked.
Checkbox wraps Base UI's Checkbox.Root and ships a built-in indicator with
checkmark and indeterminate icons, marking itself with data-slot.
Installation
npx shadcn@latest add @kosori/checkboxExample
checkbox-example.tsx
import { Checkbox } from '@/components/ui/checkbox';
import { Label } from '@/components/ui/label';
const CheckboxExample = () => (
<Label className='flex items-start gap-2 rounded-lg border p-3 hover:bg-accent/50 has-data-checked:border-primary/48 has-data-checked:bg-accent/50'>
<Checkbox defaultChecked />
<div className='flex flex-col gap-1'>
<p>Enable notifications</p>
<p className='text-muted-foreground text-xs'>
You can enable or disable notifications at any time.
</p>
</div>
</Label>
);
export default CheckboxExample;
Usage
import { Checkbox } from '@/components/ui/checkbox';
import { Label } from '@/components/ui/label';
const CheckboxDemo = () => (
<Label className='flex items-center gap-2'>
<Checkbox defaultChecked />
Enable notifications
</Label>
);