Checkbox
A control that allows the user to toggle between checked and not checked.
Installation
bash
npx @smicolon/cli add checkboxRun init once per project before adding components. See Installation.
Preview
With Label & Description
Receive emails about new products and features
Get notified about security updates
States
Props
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | — | Checked state. Use it with onChange. |
indeterminate | boolean | false | Shows a dash for a partly selected group. |
disabled | boolean | false | Disables the checkbox and dims it. |
error | boolean | false | Marks the checkbox as invalid. |
label | string | — | Label text. |
description | string | — | Secondary line below the label. |
name | string | — | Name submitted with the form. |
value | string | — | Value submitted when checked. |
onChange | (event) => void | — | Called when the checkbox changes. |
className | string | — | Extra classes for the component. |
Usage
tsx
import { Checkbox } from "@/components/ui/checkbox"
// Basic checkbox
<Checkbox />
// With label
<Checkbox label="Accept terms and conditions" />
// With description
<Checkbox
label="Marketing emails"
description="Receive emails about new products"
/>
// Indeterminate state
<Checkbox indeterminate />
// Error state
<Checkbox label="Required field" error />