AI Checkbox

A 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 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)}
    />
  );
};

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}
/>

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} />

Uncontrolled usage

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

<AiCheckbox label="Default Checkbox Uncontrolled Checked" defaultChecked />

Key props

Core functionality

• label: string - Text label displayed next to the checkbox
• checked: boolean - Whether the checkbox is checked
• onChange: (event: ChangeEvent<HTMLInputElement>) => void - Callback when state changes
• indeterminate: boolean - Shows indeterminate state (overrides checked styling)

Styling & behavior

• size: "small" | "large" - Checkbox size (default: small)
  • Small: 14px × 14px
  • Large: 20px × 20px
• disabled: boolean - Disables the checkbox
• id: string - Custom ID (auto-generated if not provided)

Form integration

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

Variations

Disabled state

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

Usage

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.