Checkbox

A toggle control with drawn-check animation, indeterminate state, and full form integration via hidden native input.

Dependencies

motion

Interaction Type

Click or Space/Enter to toggle. Supports checked, unchecked, and indeterminate states. Drawn check glyph animates on toggle with spring physics. Respects reduced motion.

Props

Options you can pass to customize this component.

Prop

Type

Description

checked

boolean | "indeterminate"

Controlled checked state. Omit for uncontrolled.

defaultChecked

boolean

Initial checked state for uncontrolled usage.

onCheckedChange

(checked: boolean | "indeterminate") => void

Callback when the checked state changes.

name

string

Form field name for the hidden native input.

disabled

boolean

Disables the checkbox.

required

boolean

Marks the field as required for form validation.

aria-invalid

boolean

Indicates validation error state.

aria-describedby

string

ID of the element describing the checkbox.

className

string

Additional CSS classes merged via cn().

Installation

npx shadcn@latest addhttps://ui.nexvyn.dev/r/checkbox.json

How to use

import { Checkbox, CheckboxField } from "@/components/ui/checkbox"

export function Demo() {
  return (
    <div className="flex flex-col gap-4">
      <CheckboxField label="Accept terms" description="You agree to our Terms.">
        <Checkbox name="terms" required />
      </CheckboxField>
      <CheckboxField label="Subscribe to updates">
        <Checkbox name="subscribe" defaultChecked />
      </CheckboxField>
    </div>
  )
}

Source Code

Click the code icon in the top-right corner to view the source code.

Contact

Questions or feedback? Reach out anytime.

License & Usage

•Free for personal and commercial use
•No attribution required
•Cannot be resold as a standalone product
•Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use

// No code loaded.