Checkbox

Alpha

An accessible checkbox with support for indeterminate state, labels, and CSS variable customization.

Import

import { Checkbox } from "@compa11y/react";

Usage

Example.tsx

import { useState } from "react";
import { Checkbox } from "@compa11y/react";

function Example() {
  const [checked, setChecked] = useState(false);

  return (
    <Checkbox
      checked={checked}
      onCheckedChange={setChecked}
    >
      Accept terms and conditions
    </Checkbox>
  );
}

Features

Checked, unchecked, and indeterminate states
Accessible label association
Custom check icon
CSS variable theming
Keyboard activation with Space

Props

Checkbox component props
Prop	Type	Default	Description
`checked`	`boolean \| 'indeterminate'`	`false`	Controlled checked state
`onCheckedChange`	`(checked: boolean) => void`	-	Called when checked state changes
`disabled`	`boolean`	`false`	Disables the checkbox
`children`	`ReactNode`	-	Label text

Keyboard Interactions

Accessibility

All keyboard interactions follow WAI-ARIA best practices and work without any additional configuration.

Keyboard shortcuts for Checkbox
Key	Action
`Space`	Toggles the checkbox

CSS Customization

Override these CSS custom properties to customize the appearance.

CSS custom properties for Checkbox
Variable	Description	Default
`--compa11y-checkbox-size`	Checkbox dimensions	`1.25rem`
`--compa11y-checkbox-radius`	Border radius	`4px`
`--compa11y-checkbox-checked-bg`	Checked state background	`#0d9488`