Checkbox

A toggleable input for boolean choices, supporting checked, unchecked, and indeterminate states.

Import

tsx

import { Checkbox } from '@tac-ui/web';

Playground

Interactively configure the Checkbox props below.

Accept terms and conditions

Label

Disabled

tsx

<Checkbox label="Accept terms and conditions" />

Default

Uncontrolled checkbox using defaultChecked. The component manages its own state internally.

Accept terms and conditionsPre-checked

tsx

<Checkbox label="Accept terms and conditions" />
<Checkbox label="Pre-checked" defaultChecked />

Indeterminate

The indeterminate state represents a partially-selected state, useful for parent checkboxes in a hierarchical selection.

Select all (partial)

tsx

<Checkbox label="Select all (partial)" indeterminate />

Disabled

Disabled checkboxes are non-interactive and visually dimmed, preserving their current state.

Disabled uncheckedDisabled checked

tsx

<Checkbox label="Disabled unchecked" disabled />
<Checkbox label="Disabled checked" disabled defaultChecked />

Controlled

Pass checked and onChange to control the checkbox state from a parent component.

Unchecked

tsx

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

<Checkbox
  label={checked ? 'Checked' : 'Unchecked'}
  checked={checked}
  onChange={(e) => setChecked(e.target.checked)}
/>

All States

Overview of all four visual states: default, checked, indeterminate, and disabled.

DefaultCheckedIndeterminateDisabled

tsx

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

API Reference

Prop	Type	Default	Description
label	string	-	Label text displayed next to the checkbox.
checked	boolean	-	Controlled checked state. Use with onChange for a controlled input.
defaultChecked	boolean	false	Initial checked state for uncontrolled usage.
indeterminate	boolean	false	Renders a dash icon representing a partially-selected state.
filled	boolean	false	Adds a tinted background to the checkbox label area.
disabled	boolean	false	Disables the checkbox, making it non-interactive and visually dimmed.
onChange	(e: React.ChangeEvent<HTMLInputElement>) => void	-	Callback fired when the checked state changes.
className	string	-	Additional CSS class names applied to the label wrapper.