Checkbox

A control that allows users to toggle between checked and unchecked states. Supports multiple visual variants and sizes.

Installation

npx shadcn@latest add checkbox

Usage

import { Checkbox } from "@hoag/ui/components/checkbox";
 
export default function Demo() {
  return <Checkbox />;
}

Default

Accept terms and conditions

<Checkbox id="default" />
<Label htmlFor="default">Accept terms and conditions</Label>

Variants

Base variants

<Checkbox defaultChecked variant="default" />
<Checkbox defaultChecked variant="destructive" />

Heavy status

<Checkbox defaultChecked variant="heavy-success" />
<Checkbox defaultChecked variant="heavy-warning" />
<Checkbox defaultChecked variant="heavy-info" />
<Checkbox defaultChecked variant="heavy-error" />

Light status

<Checkbox defaultChecked variant="light-success" />
<Checkbox defaultChecked variant="light-warning" />
<Checkbox defaultChecked variant="light-info" />
<Checkbox defaultChecked variant="light-error" />

Outline status

<Checkbox defaultChecked variant="outline-success" />
<Checkbox defaultChecked variant="outline-warning" />
<Checkbox defaultChecked variant="outline-info" />
<Checkbox defaultChecked variant="outline-error" />

Sizes

<Checkbox defaultChecked size="sm" />
<Checkbox defaultChecked size="default" />
<Checkbox defaultChecked size="lg" />

With Label

Small checkbox

Default checkbox

Large checkbox

<div className="flex items-center gap-2">
  <Checkbox id="label-sm" size="sm" defaultChecked />
  <Label htmlFor="label-sm">Small checkbox</Label>
</div>
<div className="flex items-center gap-2">
  <Checkbox id="label-default" defaultChecked />
  <Label htmlFor="label-default">Default checkbox</Label>
</div>
<div className="flex items-center gap-2">
  <Checkbox id="label-lg" size="lg" defaultChecked />
  <Label htmlFor="label-lg">Large checkbox</Label>
</div>

Disabled

<Checkbox disabled />
<Checkbox disabled defaultChecked />

API Reference

Props

Prop	Type	Default	Description
`variant`	`string`	`"default"`	Visual style of the checkbox
`size`	`"sm" \| "default" \| "lg"`	`"default"`	Size of the checkbox
`defaultChecked`	`boolean`	`false`	Initial checked state (uncontrolled)
`checked`	`boolean`	—	Controlled checked state
`onCheckedChange`	`(checked: boolean \| "indeterminate") => void`	—	Callback on change
`disabled`	`boolean`	`false`	Disable the checkbox
`indicator`	`ReactNode`	`<Check />`	Custom indicator icon

Variants

Variant	Description
`default`	Primary color when checked
`destructive`	Destructive/danger color when checked
`heavy-success/warning/info/error`	Solid status color fill when checked
`light-success/warning/info/error`	Light tinted background when checked
`outline-success/warning/info/error`	Transparent bg with colored border when checked

Input Switch