Checkbox

Checkboxes allow the user to select one or more items from a list or set. Checkbox is an accessible Camp Next Gen component with support for labeled controls, default and large sizes, indeterminate visuals for parent rows, disabled and required states, and standard HTML form props. The authoritative package is @camp/checkbox.

Overview

Use this page with the Checkbox Playground in Storybook to explore props interactively. Variations below embed individual Canvas stories from Checkbox Chromatic Tests.

Resources

Install

yarn add @camp/checkbox

Upgrading to Next Gen

🔄 Consolidated package: @camp/ai-checkbox and the AiCheckbox export are consolidated into @camp/checkbox with the Checkbox component. Prefer @camp/checkbox for all new usage.

🧩 Controlled indeterminate: indeterminate is only supported in the controlled shape: pass checked, onChange, and indeterminate together. Uncontrolled usage cannot set indeterminate (see types in @camp/checkbox).

Variations

Examples use Canvas stories derived from Components/Checkbox/Checkbox Tests/Checkbox Chromatic Tests (components-checkbox-checkbox-tests-checkbox-chromatic-tests--…). The overview above uses Components/Checkbox (components-checkbox) for autodocs and the Playground.

Playground

Use the Storybook Playground for interactive controls (label, checked, size default | large, indeterminate, disabled, and more).

import { Checkbox } from '@camp/checkbox';
 
<Checkbox label="Label" />;

Default Size Checked

Use checked and onChange together whenever you manage selection in React state (required for predictable checked UI in controlled mode).

import { Checkbox } from '@camp/checkbox';
 
<Checkbox
  label="Default Checkbox Controlled Checked"
  checked={isChecked}
  onChange={handleChange}
/>;

Indeterminate Parent Row

Pass indeterminate with checked and onChange to render the indeterminate glyph—for example a “select all” control when child rows are mixed. Clearing indeterminate when you no longer need the mixed state restores the ordinary checked visuals.

import { Checkbox } from '@camp/checkbox';
 
<Checkbox label="Parent (mixed children)" checked={false} indeterminate onChange={handleChange} />
 
<Checkbox
  label="Parent (reads as checked with indeterminate icon)"
  checked
  indeterminate
  onChange={handleChange}
/>

Disabled

Disabled checkboxes are not interactive. They can be shown unchecked or checked according to your data.

import { Checkbox } from '@camp/checkbox';
 
<Checkbox label="Disabled" disabled />
<Checkbox label="Disabled checked" disabled checked />

Required

Use required when validation should enforce that the checkbox is checked (for example acceptance of terms).

import { Checkbox } from '@camp/checkbox';
 
<Checkbox label="Accept terms" required />;

Large Size

Large checkboxes suit builder canvases and other layouts where selection is a primary focal action—set size="large". Large uses the same behavior as default; only scale and spacing differ.

import { Checkbox } from '@camp/checkbox';
 
<Checkbox label="Large Checkbox" size="large" />
<Checkbox label="Large checked" size="large" checked={checked} onChange={handleChange} />

Usage

Uncontrolled

Omit checked and onChange when you rely on native form behavior or defaultChecked.

Form Value

Use value for the underlying <input type="checkbox" /> when posting forms or grouping values.

import { Checkbox } from '@camp/checkbox';
 
<Checkbox name="terms" value="accepted" label="I agree to the terms" />;

Best Practices

• Checkboxes should act independently; one option should not unexpectedly toggle another. The exception is an explicit select all control whose behavior is clear to users.
• When grouped, order options in a logical sequence (for example alphabetical or by task flow).
• Display multiple checkboxes vertically rather than tightly wrapping long rows.
• For more than roughly ten discrete options in one group, prefer a dropdown or multi-select pattern.

Content Guidelines

Checkbox labels should be concise, sentence case, and omit trailing punctuation unless you are quoting full sentences.

Accessibility

Structure

• Checkbox renders a Label from @camp/form with htmlFor tied to an id generated with useId from @camp/core, so clicking the text label activates the native control.
• The native input type="checkbox" retains focus semantics; required flows through to input for built-in constraint validation messaging.

Keyboard

• Tab / Shift+Tab move focus onto the checkbox.
• Space toggles checked on the focused control (native checkbox behavior).

Similar Components

Radio Button

Allows the user to select one option from a set.

Dropdown

Allows users to select an option from a dropdown menu.