Checkbox

A real <input type="checkbox"> with the native box painted over. checked, defaultChecked, onChange, required, name and ref behave exactly as they would on a bare input, so it works inside an uncontrolled form too.

Props

PropValuesDefaultDescription
size"sm", "md", "lg""md"Box and tick size.
invalidbooleanfalseApplies the danger border and sets aria-invalid.
classNamestring""Appended to the <input>, not the wrapper.

All other <input> attributes are forwarded.

Common patterns

// Controlled
<Checkbox checked={agreed} onChange={(e) => setAgreed(e.target.checked)} />

// Labelled — wrap both so clicking the text toggles it
<label className="flex items-center gap-2.5 text-sm">
  <Checkbox name="terms" required />
  I accept the terms
</label>

Notes

The component renders no label of its own. Wrap it in a <label> as above, or pair it with <label htmlFor> and an id.

The tick is an inline SVG held at opacity-0 and revealed by peer-checked, so there is no JavaScript involved in the checked state — the browser still owns it.

There is no indeterminate variant. Set ref.current.indeterminate = true yourself if you need one; the DOM property has no React attribute.