Checkbox
Native checkbox with warren styling.
Source
"use client"
import { Checkbox } from "@/registry/warren/checkbox/checkbox"
import { Label } from "@/registry/warren/label/label"
export default function CheckboxDemo() {
return (
<div className="flex flex-col gap-3 border-2 border-border bg-panel p-4">
<Label className="flex cursor-pointer items-center gap-3">
<Checkbox />
SUPPLY-CHAIN
</Label>
<Label className="flex cursor-pointer items-center gap-3">
<Checkbox defaultChecked />
INDEX-EXPOSURE
</Label>
<Label className="flex cursor-pointer items-center gap-3">
<Checkbox />
REGULATORY
</Label>
</div>
)
}
Installation
npx shadcn@latest add https://warren.eduard3v.com/r/checkbox.jsonUsage
import { Checkbox } from "@/components/ui/checkbox"<Checkbox defaultChecked />Props
Checkbox spreads all native input props onto a styled <input type="checkbox">. Use defaultChecked for the initial state, checked + onChange for controlled state, and disabled to gray the box out. A checked box shows an ink check glyph over the primary fill, so the state reads without relying on color alone.
Labels
The Label component pairs with Checkbox: wrap both in a label and the box toggles on label click.
API Reference
This component has no custom props. It forwards native <input type="checkbox"> attributes; TypeScript types are derived from React.ComponentProps<"input">. All native attributes are supported (checked, defaultChecked, disabled, onChange, ...).