Checkbox

An accessible checkbox with a soft animated checkmark. Pairs with a label and supports controlled and uncontrolled usage.

Accept terms

Subscribe to updates

Disabled option

Installation

npm install @bloomkit/react

Usage

import { Checkbox } from "@bloomkit/react";
 
<Checkbox label="Accept terms" />

Controlled

const [checked, setChecked] = useState(false);
 
<Checkbox
  label="Remember me"
  checked={checked}
  onCheckedChange={(v) => setChecked(v === true)}
/>

Default checked

<Checkbox label="Subscribe to updates" defaultChecked />

Without label

<Checkbox aria-label="Select item" />

Disabled

<Checkbox label="Unavailable option" disabled />

Props

Prop	Type	Default	Description
label	string	—	Text label rendered beside the checkbox
checked	boolean	—	Controlled checked state
defaultChecked	boolean	false	Initial checked state (uncontrolled)
onCheckedChange	(checked: boolean \| 'indeterminate') => void	—	Called when the checked state changes
disabled	boolean	false	Prevents interaction and dims the checkbox
className	string	""	Additional Tailwind classes