Checkbox

Checkbox on Radix Checkbox with a check indicator and focus and invalid states.

Installation

pnpm dlx shadcn@latest add @ward/checkbox

Add the Ward registry to components.json once:

"registries": {
  "@ward": "https://ward.so/r/{name}.json"
}

Or install from the URL with no configuration: npx shadcn@latest add https://ward.so/r/checkbox.json

Usage

import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";
<div className="flex items-center gap-2">
  <Checkbox id="terms" defaultChecked onCheckedChange={(checked) => console.log(checked)} />
  <Label htmlFor="terms">Accept the terms</Label>
</div>

Props

PropTypeDefaultDescription
checkedboolean | "indeterminate"-Whether the box is checked, when the parent controls it; indeterminate draws a check too.
defaultCheckedbooleanfalseWhether the box starts checked when it is uncontrolled.
onCheckedChange(checked: boolean | "indeterminate") => void-Called when the box is toggled.
disabledbooleanfalseDim the box and stop it taking input.
aria-invalidbooleanfalseMarks the box as invalid and draws the destructive border.

Ward · Version 1.0.0 · Registry manifest