Checkbox

Radix Checkbox with CSS-drawn check and indeterminate states.

checkbox
0px

Customize

Edit props; preview updates instantly.

Customize
State

Props

Props accepted by Checkbox.

PropTypeDefaultDescription
checkedboolean | "indeterminate"—Controlled checked state. Pass `"indeterminate"` for the three-state look. Pair with `onCheckedChange`.
defaultCheckedboolean | "indeterminate"falseInitial state when uncontrolled.
onCheckedChange(checked: boolean | "indeterminate") => void—Fires whenever the state changes.
disabledbooleanfalseGreys out the box and blocks clicks/keyboard.
requiredbooleanfalseMarks the box as required for form submission.
namestring—Name forwarded to the hidden form input.
valuestring"on"Value sent with the form when checked.
classNamestring—Extra class names merged onto the root button.

Installation

Choose CLI for the one-line shadcn install, or copy the file manually.

npx shadcn@latest add https://2lazyui.com/r/checkbox.json

Usage

Import the component and drop it into a render.

demo.tsx12 lines
import { Checkbox } from "@/components/lazy-ui/checkbox";

export function Demo() {
  return (
    <div className="flex items-center gap-2">
      <Checkbox id="terms" defaultChecked />
      <label htmlFor="terms" className="text-sm text-neutral-200">
        Accept terms and conditions
      </label>
    </div>
  );
}

Credits

Radix CheckboxAccessible checked and indeterminate state model.