Checkbox

A boolean toggle for multi-select scenarios. The checkmark icon uses theme.iconWeight, so it automatically adapts to the active theme’s personality.

When to use: Multi-select lists, consent / agreement acceptance, feature flags where multiple options can be active simultaneously.

When not to use: Single true/false preferences that take immediate effect — use Switch. Mutually exclusive options — use Radio.

Import

import { Checkbox } from '@/components';

Usage

<Checkbox
  checked={agreed}
  onToggle={setAgreed}
  label="I agree to the Terms of Service"
/>

Props

Prop	Type	Default	Description
checked	boolean	—	Checked state (required)
onToggle	(checked: boolean) => void	—	Toggle handler (required)
label	string	—	Visible text label
isDisabled	boolean	false	Prevents interaction
testID	string	—	For testing

Multi-select pattern

const [selected, setSelected] = useState<string[]>([]);

function toggle(id: string) {
  setSelected(prev =>
    prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]
  );
}

<Checkbox checked={selected.includes('news')} onToggle={() => toggle('news')} label="News updates" />
<Checkbox checked={selected.includes('offers')} onToggle={() => toggle('offers')} label="Special offers" />
<Checkbox checked={selected.includes('tips')} onToggle={() => toggle('tips')} label="Product tips" />

Accessibility

• Role: checkbox
• State: checked / unchecked
• The label is announced as the accessible name

Related

• Switch — immediate-effect boolean toggle
• Radio — mutually exclusive single-select