Checkbox

Checkbox with label and indeterminate state. Accessible via keyboard (Space/Enter) with support for form integration.

import { Checkbox } from 'phoundry-ui';

Basic toggle

Unchecked

Show code

<Checkbox checked={value} onchange={() => value = !value} />

With label and description

Enable notifications

Accept terms and conditions You agree to our privacy policy

Show code

<Checkbox
  checked={value}
  onchange={() => value = !value}
  label="Accept terms and conditions"
  description="You agree to our privacy policy"
/>

Indeterminate state

Select all Some items are selected

Show code

<Checkbox
  checked={false}
  indeterminate={indeterminate}
  onchange={() => indeterminate = false}
  label="Select all"
/>

Sizes

Small box

Medium box

Show code

<Checkbox checked={v} onchange={...} size="sm" label="Small" />
<Checkbox checked={v} onchange={...} size="md" label="Medium" />

Form name (hidden input)

With name, a hidden <input type="checkbox"> mirrors state for native submission. Keep id in sync with external labels if you do not use the built-in label.

Demo field name

Show code

<form method="post">
  <Checkbox checked={agree} onchange={...} name="terms" label="I agree" />
</form>

Disabled

Disabled (checked)

Disabled (unchecked)

Show code

<Checkbox checked={true} disabled label="Disabled (checked)" />
<Checkbox checked={false} disabled label="Disabled (unchecked)" />

Props

Prop	Type	Default	Description
checked required	boolean	—	Whether the checkbox is checked
onchange	() => void	—	Called when the checkbox is toggled
indeterminate	boolean	false	Shows a dash icon instead of a checkmark (mixed state)
disabled	boolean	false	Prevents interaction
size	'sm' \| 'md'	'sm'	Indicator box (~14px sm / ~16px md display size, not full control height)
label	string \| Snippet	—	Inline label rendered next to the checkbox
description	string	—	Helper text below the label
class	string	—	Additional CSS classes
id	string	—	Element id (auto-generated if omitted)
name	string	—	Form field name — renders a hidden input
element	HTMLButtonElement	—	Bindable reference to the checkbox button.
...rest	Record<string, unknown>	—	Additional attributes forwarded to the checkbox `<button>` (e.g. `aria-invalid`, `data-testid`).

Usage tips

Use indeterminate for “select all” patterns where only some children are checked.
Pass a name prop to render a hidden <input> for native form submission.
When using without the label prop, wrap in your own <label> for accessibility.