Forms component

Checkbox

Square ink box that fills with a saturated color and shows a bold black check on toggle. Backed by a real <input type="checkbox"> — fully keyboard and screen-reader accessible. Controlled or uncontrolled. Optional inline label. 4 fill colors.

FormControlledAccessibleKeyboard4 colorsLabel prop

components/forms/Checkbox.jsx

Interactive — click to toggle

All checkboxes are interactive

Enable email notificationsSubscribe to weekly digestShare anonymous analyticsOpt-in to beta features (locked)

Fill colors

color prop — 4 options

States

unchecked · checked · disabled unchecked · disabled checked

Do / Don't

✓ Do

I agree to the terms

Always use the SLAB Checkbox component. It wraps a real input internally — you get SLAB styling and full keyboard + screen-reader support automatically.

✕ Don't

Hand-rolled div checkbox

Don't build checkboxes from scratch using div or span. They're invisible to keyboards and screen readers.

Props

Prop	Type	Default	Description
checked	boolean	—	Controlled checked state. Omit for uncontrolled.
defaultChecked	boolean	false	Initial state for uncontrolled usage.
onChange	(checked: boolean) => void	—	Called with new checked state on toggle.
id	string	auto	Stable id wired to the hidden <input> and <label htmlFor>. Auto-generated if omitted.
label	string	null	Inline label text — clicking it also toggles the checkbox.
color	"lime"\|"pink"\|"violet"\|"neon"	"lime"	Fill color when checked.
disabled	boolean	false	Mutes to 45% opacity, disables pointer events.
style	CSSProperties	{}	Merged onto the root element.

Usage

import { Checkbox } from "components/forms/Checkbox";

// Uncontrolled with label
<Checkbox label="Enable notifications" />

// Controlled
<Checkbox
  checked={agreed}
  onChange={setAgreed}
  label="I agree to the terms"
  color="violet"
/>

// Disabled
<Checkbox checked disabled label="Locked setting" />