Photonix

Checkbox

A control that allows the user to make a binary choice.

Preview

Usage
import { Checkbox } from '@photonix/ultimate';

<Checkbox label="Standard" />
<Checkbox label="Checked" defaultChecked />
<Checkbox label="Indeterminate" indeterminate />
<Checkbox label="Disabled" disabled />

Component API

Checkbox

Prop
Type
Default
Description
checked
boolean
-
Whether the checkbox is checked (controlled)
defaultChecked
boolean
false
Initial checked state when uncontrolled
indeterminate
boolean
false
Whether the checkbox is in indeterminate state (for selectAll partial)
size
"small" | "medium"
'medium'
Size of the checkbox
label
React.ReactNode
-
Label text for the checkbox
onChange
((checked: boolean) => void)
-
Callback when checkbox state changes

Variants

Basic Controlled

A simple controlled checkbox.

Basic Controlled
const [checked, setChecked] = useState(false);

<Checkbox 
  label="Accept terms and conditions" 
  checked={checked} 
  onChange={setChecked} 
/>

Uncontrolled

Use defaultChecked for uncontrolled behavior.

Uncontrolled
<Checkbox label="Default Checked" defaultChecked />
<Checkbox label="Default Unchecked" />

Sizes

Checkboxes are available in small and medium (default) sizes.

Sizes
<Checkbox label="Medium (Default)" />
<Checkbox label="Small" size="small" />

Indeterminate

Used for nested lists where some but not all children are selected.

Indeterminate
<Checkbox 
  label="Parent Option" 
  indeterminate 
  checked 
/>

States

Disabled states for both checked and unchecked checkboxes.

States
<Checkbox label="Disabled" disabled />
<Checkbox label="Disabled Checked" disabled defaultChecked />
<Checkbox label="Disabled Indeterminate" disabled indeterminate />

On this page

Preview
Component API
Variants
Basic Usage
Sizes
Indeterminate
Disabled
Photonix UI - React Components, Templates & Figma Design System