Preview

Installation

<> import.ts
import { Checkbox } from "@/components/ui/checkbox"

Code

<> component.tsx
import { Checkbox } from "@/components/ui/checkbox"

<Checkbox checked={checked} onChange={setChecked} />

API Reference

Checkbox

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

<> import.ts
import { Checkbox, CheckboxGroup, CheckboxPresets } from "@/components/ui/checkbox"

Props

PropTypeDefaultDescription
checked
boolean—Whether the checkbox is checked (controlled)
defaultChecked
booleanfalseDefault checked state (uncontrolled)
onChange
(checked: boolean) => void—Change handler for the checkbox
disabled
booleanfalseWhether the checkbox is disabled
size
"sm" | "md" | "lg""md"Size of the checkbox
label
string—Label text for the checkbox
className
string""Additional CSS classes
id
string—ID for the checkbox input

Examples

Example 1
<> example.tsx
// Basic checkbox
<Checkbox />
Example 2
<> example.tsx
// Checkbox with label
<Checkbox label="Accept terms and conditions" />
Example 3
<> example.tsx
// Different sizes
<Checkbox size="sm" label="Small" />
<Checkbox size="md" label="Medium" />
<Checkbox size="lg" label="Large" />
Example 4
<> example.tsx
// Controlled checkbox
<Checkbox 
  checked={isChecked}
  onChange={setIsChecked}
  label="Controlled checkbox"
/>
Example 5
<> example.tsx
// Checkbox group
<CheckboxGroup>
  <Checkbox label="Option 1" />
  <Checkbox label="Option 2" />
  <Checkbox label="Option 3" />
</CheckboxGroup>

Presets

form

Form style with medium size and vertical orientation

settings

Settings style with small size and compact spacing

large

Large style with big size and generous spacing