Checkbox
A checkbox control for selecting one or more options. Supports labels, hints, sizes, and disabled state.
Base with Label
A simple checkbox with a label.
Base with Label
Label and Hint
A checkbox with both label and descriptive hint text.
Label and Hint
Disabled
Disabled checkboxes in both unchecked and checked states.
Disabled
Sizes
Three sizes: sm, md, and lg.
Small / Medium / Large
Usage
Import the Checkbox component and configure with props.
tsx
import { Checkbox } from "@/components/ui/Checkbox";
// Basic
<Checkbox label="Remember me" size="sm" />
// With hint
<Checkbox label="Remember me" hint="Save my login details for next time." size="sm" />
// Controlled
const [agreed, setAgreed] = useState(false);
<Checkbox label="Accept terms" checked={agreed} onChange={setAgreed} />
// Disabled
<Checkbox label="Disabled" disabled />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Label text next to the checkbox. |
| hint | string | — | Hint/description text below the label. |
| size | "sm" | "md" | "lg" | "sm" | Size of the checkbox. |
| disabled | boolean | false | Disable the checkbox. |
| checked | boolean | — | Controlled checked state. |
| defaultChecked | boolean | false | Initial checked state (uncontrolled). |
| onChange | (checked: boolean) => void | — | Called when checkbox state changes. |