Checkbox

Status: stableAccessibility reviewedtenet-ui@0.4.0

import { Checkbox } from 'tenet-ui';

Also accepts every prop of Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>.

Source: src/components/Checkbox/Checkbox.tsx

Usage guidelines

When to use: an independent on/off choice (or several non-exclusive ones). Use Checkbox with its label, not a raw <input> or a styled toggle <div>.

Rules

Always pass a label (it is associated to the input automatically); add caption for help text.
For a set of mutually exclusive options use RadioGroup, not multiple checkboxes.
Control with checked + onChange, or leave uncontrolled with defaultChecked.
The tick color comes from the accent token (accent-color) — never restyle it with hardcoded colors.

Do / Don’t

✅ <Checkbox label="Watch this repository" caption="Get notified of all activity." />
❌ <div className="checkbox checked" /> — not focusable, not a real input, no label.

Examples

3 stories for Checkbox — open in Storybook

Default components-checkbox--default
With Caption components-checkbox--with-caption
Checked components-checkbox--checked

The full matrix (all args, controls, accessibility panel) is in Storybook.

Props

Prop	Type	Default	Description
`label`	`ReactNode`	—	Visible label rendered next to the box.
`caption`	`ReactNode`	—	Optional helper text under the label.
`invalid`	`boolean`	`false`	Mark the field as invalid (sets `aria-invalid`).
`indeterminate`	`boolean`	`false`	Tri-state "partially checked" visual (mixed); also sets `aria-checked="mixed"`.