Aspyn

Checkbox

Accessible checkbox built on Radix.

Installation

npm install @aspyn-io/kit @aspyn-io/tokens
import { Checkbox } from "@aspyn-io/kit";
import { Label } from "@aspyn-io/kit";

With label

Always pair with a Label via htmlFor/id — clicking the label toggles the box.

<div className="flex items-center gap-2">
  <Checkbox id="terms" />
  <Label htmlFor="terms">I agree to the terms</Label>
</div>

Controlled

const [checked, setChecked] = React.useState(false);

<Checkbox
  id="notify"
  checked={checked}
  onCheckedChange={(value) => setChecked(value === true)}
/>

Disabled

<Checkbox id="locked" disabled />
<Label htmlFor="locked">Managed by your organization</Label>

Notes

  • onCheckedChange receives true | false | "indeterminate" — compare explicitly when storing booleans.