Checkbox

A high-level checkbox component that provides a complete set of features with built-in styling.

Features

Styling Options

Multiple color, size, and radius variants

State Management

Controlled and uncontrolled modes with indeterminate state

Form Integration

Works seamlessly with form libraries and native forms

Accessibility

ARIA support and keyboard navigation built-in

Import

import { Checkbox } from 'react-checkbox-pro';

Basic Usage

function App() {
  return (
    <Checkbox defaultChecked>
      Click me
    </Checkbox>
  );
}

Props

Prop	Type	Default
`checked`	`boolean`	-
`defaultChecked`	`boolean`	-
`onChange`	`((checked: boolean) => void) \| ((event: ChangeEvent<HTMLInputElement>) => void)`	-
`disabled`	`boolean`	-
`required`	`boolean`	-
`name`	`string`	-
`value`	`string`	-
`id`	`string`	-
`size`	`CheckboxSize`	-
`color`	`CheckboxColor`	-
`radius`	`CheckboxRadius`	-
`icon`	`ReactNode`	-
`checkedIcon`	`ReactNode`	-
`children`	`string \| number \| bigint \| boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...> \| ((props: CheckboxRenderProps) => ReactNode)`	-
`aria-label`	`string`	-
`aria-labelledby`	`string`	-
`aria-describedby`	`string`	-
`aria-invalid`	`boolean`	-
`error`	`boolean`	-
`helperText`	`string`	-
`indeterminate`	`boolean`	-
`errorMessage`	`string`	-
`labelPlacement`	`LabelPlacement`	-
`shortcut`	`string`	-
`onShortcut`	`() => void`	-
`isWithoutTailwind`	`boolean`	-
`className`	`string`	-
`wrapperClassName`	`string`	-
`labelClassName`	`string`	-
`iconClassName`	`string`	-
`helperTextClassName`	`string`	-

Styling Options

The Checkbox component comes with built-in styling using Tailwind CSS by default. You can also use it without Tailwind:

With Tailwind (Default)

<Checkbox 
  color="primary"
  size="lg"
  radius="md"
>
  Styled Checkbox
</Checkbox>

Without Tailwind

<Checkbox 
  isWithoutTailwind
  color="primary"
  size="lg"
>
  Custom CSS Checkbox
</Checkbox>

Component Structure

The Checkbox component is composed of several parts:

Wrapper - Contains the checkbox and label
Input - The native checkbox input
Icon - The check/indeterminate icon
Label - Text or custom content
Helper Text - Additional information or error message

Best Practices

State Management
// Uncontrolled <Checkbox defaultChecked> Uncontrolled </Checkbox> // Controlled <Checkbox checked={checked} onChange={setChecked} > Controlled </Checkbox>

Form Integration

<form onSubmit={handleSubmit}>
  <Checkbox
    name="terms"
    required
    error={hasError}
    errorMessage="Please accept the terms"
  >
    Accept Terms
  </Checkbox>
</form>