Checkbox
FormsA checkbox input for selecting one or more options from a list. Use checkboxes when users can select multiple items independently.
Import
import { Checkbox } from "@/components/ui/checkbox";Usage
Basic Checkbox
Standard checkbox with label
With Description
Checkbox with additional helper text
States
Different checkbox states
Multiple Options
Group of related checkboxes
API Reference
label—stringLabel text displayed next to the checkbox
description—stringAdditional description text below the label
checked—booleanControlled checked state
defaultCheckedfalsebooleanInitial checked state (uncontrolled)
disabledfalsebooleanWhether the checkbox is disabled
onChange—(e: ChangeEvent) => voidHandler called when checked state changes
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Label text displayed next to the checkbox |
description | string | — | Additional description text below the label |
checked | boolean | — | Controlled checked state |
defaultChecked | boolean | false | Initial checked state (uncontrolled) |
disabled | boolean | false | Whether the checkbox is disabled |
onChange | (e: ChangeEvent) => void | — | Handler called when checked state changes |