AI Checkbox

An accessible checkbox component with support for indeterminate states, multiple sizes, and seamless form integration. Built with proper focus management and keyboard accessibility.

Overview

Resources

Install

yarn add @camp/ai-checkbox

Usage

Basic controlled checkbox

import { AiCheckbox } from '@camp/ai-checkbox';
import { useState } from 'react';
 
const MyForm = () => {
  const [agreed, setAgreed] = useState(false);
 
  return (
    <AiCheckbox
      label="Default checkbox"
      checked={agreed}
      onChange={(e) => setAgreed(e.target.checked)}
    />
  );
};

Uncontrolled usage

For simple forms where you don’t need to track state in React:

<AiCheckbox label="By default, this checkbox is uncontrolled" />

Form integration

• Extends all standard React.InputHTMLAttributes<HTMLInputElement>
• Supports name, id, value, required, defaultChecked, form, etc.

Variations

Disabled state

<AiCheckbox label="Default Checkbox Disabled" disabled />

Indeterminate state

Perfect for “select all” scenarios where some but not all items are selected. The indeterminate prop overrides the visual appearance regardless of the checked value.

<AiCheckbox label="Indeterminate checkbox" indeterminate checked={true} />

Checkbox sizes

// Small checkbox (14px × 14px)
<AiCheckbox
  size="small"
  label="Small checkbox"
  checked={true}
/>
 
// Large checkbox (20px × 20px)
<AiCheckbox
  size="large"
  label="Large checkbox"
  checked={true}
/>

Best practices

• Checkboxes should act independently, and the selection or deselection of a checkbox does not affect the selection status of others in the list. The exception to this rule would be a bulk selection checkbox the clearly acts as a bulk select or deselection tool for all items in the list.
• When grouped, checkboxes should be in some logical order that makes it easy for the user to read and understand, whether that is numerical or alphabetical or some other contextually-based grouping.
• Multiple checkboxes should always be displayed vertically, even if not in a grouping.
• Checkbox groupings are perfect for 10 or less options. If there are more to choose from, use a multi-select dropdown  instead.

Content guidelines

Checkbox labels should be clearly written, in sentence case and avoiding punctuation at the end.

Accessibility

Keyboard support

• Move focus to each checkbox using the tab key, or shift + tab to move backwards
• To interact with the checkbox when it has keyboard focus, press the space key

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.