Checkbox
Binary on/off input. Supports indeterminate state, label, description, error state, two sizes, and group patterns.
import
{ Checkbox } from "@pepulux/ui"States — unchecked / checked / indeterminate / disabled
Sizes — sm / md
sm is 16px, md is 20px.
With description
Receive product news, tips, and promotions.
Get notified of login attempts and suspicious activity.
A summary of everything that happened in your workspace.
Error state
Red border communicates validation failure.
You must accept the terms to continue.
Controlled state
Fully controlled with useState.
Get weekly product updates.
State: false
Select all / indeterminate group
Parent checkbox drives indeterminate state when a subset of children are checked.
1 of 4 selected
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Label text displayed next to the checkbox |
| description | string | — | Supporting text below the label |
| size | "sm" | "md" | "sm" | Checkbox dimension — 16px (sm) or 20px (md) |
| indeterminate | boolean | false | Dash icon for partial-selection state (overrides checked icon) |
| checked | boolean | — | Controlled checked state |
| defaultChecked | boolean | false | Uncontrolled initial checked state |
| onChange | (e: ChangeEvent<HTMLInputElement>) => void | — | Change handler |
| disabled | boolean | false | Disables interaction and dims the control |
| id | string | — | Custom id; auto-generated if not provided |
| className | string | — | Applied to the outer wrapper div |