Checkbox
Binary selection control with support for indeterminate state and multiple sizes
Overview
The Checkbox component provides a binary selection control that allows users to toggle between checked and unchecked states. It includes support for an indeterminate state for representing partial selections, multiple sizes, and full keyboard accessibility.
Import
import { Checkbox } from "@px-ui/core";Usage
<div className="flex items-center gap-2">
<Checkbox id="terms" />
<label htmlFor="terms">Accept terms and conditions</label>
</div>Examples
Sizes
The Checkbox component supports three size variants to match different interface densities.
<Checkbox id="small" size="sm" defaultChecked />
<Checkbox id="default" size="default" defaultChecked />
<Checkbox id="large" size="lg" defaultChecked />Indeterminate State
The indeterminate state is useful for representing partial selections, such as when a parent checkbox controls multiple child checkboxes and only some are selected.
<Checkbox id="unchecked" />
<Checkbox id="indeterminate" indeterminate defaultChecked />
<Checkbox id="checked" defaultChecked />Disabled State
Checkboxes can be disabled in any state: unchecked, checked, or indeterminate.
<Checkbox id="disabled-unchecked" disabled />
<Checkbox id="disabled-checked" disabled defaultChecked />
<Checkbox id="disabled-indeterminate" disabled indeterminate defaultChecked />API Reference
Checkbox
A binary selection control component with customizable size and indeterminate state support.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "default" | Visual style variant |
size | "default" | "sm" | "lg" | "default" | Size of the checkbox |
indeterminate | boolean | false | When true, displays a minus icon to indicate partial selection |
className | string | - | Additional CSS classes |
Inherited Props: Inherits all props from Base UI Checkbox.Root including checked, defaultChecked, onCheckedChange, disabled, required, etc.