Checkbox

An animated checkbox component with spring-based check animation and controlled/uncontrolled state support.

Import

import { Checkbox } from '@mks2508/mks-ui/react';

.tsx

<div className="flex items-center gap-4">
<Checkbox />
<Checkbox defaultChecked />
</div>

Accept terms and conditions

.tsx

<div className="flex items-center gap-2">
<Checkbox id="terms" />
<Label htmlFor="terms">Accept terms and conditions</Label>
</div>

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

<Checkbox checked={checked} onCheckedChange={setChecked} />

.tsx

<div className="flex items-center gap-4">
<Checkbox disabled />
<Checkbox disabled defaultChecked />
</div>

Prop	Type	Default	Description
`checked`	`boolean`	—	Controlled checked state
`defaultChecked`	`boolean`	`false`	Initial checked state (uncontrolled)
`onCheckedChange`	`(checked: boolean) => void`	—	Change handler
`disabled`	`boolean`	`false`	Disable interactions
`id`	`string`	—	HTML id for label association
`className`	`string`	—	Additional CSS classes