Checkbox

A recessed well that fills with light when checked.

Install

$ pnpm dlx shadcn@latest add https://vitrumui.vercel.app/r/checkbox.json

Examples

Default

Accept terms and conditions Subscribe to release notes Disabled option

"use client";

import { Checkbox } from "@/components/ui/checkbox";

export function CheckboxDemo() {
  return (
    <div className="flex flex-col gap-3">
      <label className="flex items-center gap-2.5 text-sm">
        <Checkbox defaultChecked /> Accept terms and conditions
      </label>
      <label className="flex items-center gap-2.5 text-sm">
        <Checkbox /> Subscribe to release notes
      </label>
      <label className="flex items-center gap-2.5 text-sm text-muted-foreground">
        <Checkbox disabled /> Disabled option
      </label>
    </div>
  );
}

API

<Checkbox />

Prop	Type	Default	Description
checked	boolean \| "indeterminate"	—	Controlled state.
defaultChecked	boolean	false	Uncontrolled initial state.
onCheckedChange	(checked) => void	—	Change callback.