Checkbox
Toggle control for on and off states
import { Checkbox } from "@plexui/ui/components/Checkbox";Examples
Overview
variant
Variants
solid
solid pill
ghost
Pill
Ghost
With description
Indeterminate
Disabled
solid
solid pill
ghost
Label orientation
orientation
Without label
Group with select all
Group with description
Select the items you want to display on the desktop.
With Field
Please review and accept the terms before continuing.
You must accept the terms to continue.
Grouped sections
Configure which emails you receive.
Configure which push notifications you receive.
Reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "solid" | "ghost" | "solid" | Visual style — solid (filled background) or ghost (checkmark only) |
pill | boolean | false | Fully rounded indicator corners |
checked | boolean | "indeterminate" | — | Controlled state |
defaultChecked | boolean | "indeterminate" | — | Initial state (uncontrolled) |
onCheckedChange | (next: boolean) => void | — | Called when state changes |
label | ReactNode | — | Accessible label — accepts ReactNode for rich content |
disabled | boolean | false | Prevent interaction |
required | boolean | — | Required for form submission |
name | string | — | Form field name |
value | string | — | Value when submitted |
orientation | "left" | "right" | "left" | Label position relative to checkbox |
className | string | — | CSS classes applied to wrapper node |
id | string | — | The id of the checkbox element |