Checkbox

Animated checkbox with SVG check/intermediate marks, label support, and keyboard accessibility. Built on Framer Motion with customizable SVG paths.

Import

import { Checkbox } from 'reablocks';

Checkbox Props

Basic Usage

const [checked, setChecked] = useState(false);
<Checkbox checked={checked} label="Accept terms" onChange={setChecked} />

Intermediate State

<Checkbox checked={checked} intermediate label="Select all" onChange={setChecked} />

Label Position

<Checkbox checked={checked} label="Start label" labelPosition="start" onChange={setChecked} />
<Checkbox checked={checked} label="End label" labelPosition="end" onChange={setChecked} />

Sizes

<Checkbox checked={checked} size="small" label="Small" onChange={setChecked} />
<Checkbox checked={checked} size="medium" label="Medium" onChange={setChecked} />
<Checkbox checked={checked} size="large" label="Large" onChange={setChecked} />

Custom SVG Paths

<Checkbox
  borderPath="M2 0.5h12s1.5 0 1.5 1.5v12s0 1.5 ..."
  checkedPath="M14.49 2.99..."
  checked={checked}
  label="Custom check"
  onChange={setChecked}
/>

Custom Label

<Checkbox
  checked={checked}
  label={<div><span className="mr-1">Check</span><b>me</b></div>}
  onChange={setChecked}
/>

CheckboxTheme Interface

interface CheckboxTheme {
  base: string;
  label: {
    base: string;
    clickable: string;
    disabled: string;
    checked: string;
    sizes: { small, medium, large };
  };
  border: { base: string; disabled: string; checked: string };
  check: { base: string; disabled: string; checked: string };
  checkbox: { base: string; disabled: string; checked: string };
  sizes: { small, medium, large };
  boxVariants: {
    hover: { strokeWidth, stroke, fill };
    pressed: { scale };
    checked: { stroke, fill };
    unchecked: { stroke, fill };
  };
}