Forms

Checkbox

A control that allows the user to select one or more items from a set.

Sizes

Three size variants for different interface densities.

Props

Prop	Type	Default	Description
`checked`	`boolean`	`false`	The controlled checked state of the checkbox
`onCheckedChange`	`(checked: boolean) => void`	`—`	Event handler called when the checked state changes
`size`	`"sm" \| "md" \| "lg"`	`"md"`	The size of the checkbox
`disabled`	`boolean`	`false`	Whether the checkbox is disabled

Usage

import { Checkbox } from '@/components/ui/checkbox';
import { Label } from '@/components/ui/label';

// With Label component
<div className="flex-row items-center gap-2">
  <Checkbox id="terms" checked={checked} onCheckedChange={setChecked} />
  <Label htmlFor="terms">Accept terms</Label>
</div>

Installation

$npx kachindo-ui add checkbox