p-checkbox-4

PreviousNext

Card-style checkbox

Docs
cossblock

Preview

Loading preview…
registry/default/particles/p-checkbox-4.tsx
import { Checkbox } from "@/registry/default/ui/checkbox";
import { Label } from "@/registry/default/ui/label";

export default function Particle() {
  return (
    <Label className="flex items-start gap-2 rounded-lg border p-3 hover:bg-accent/50 has-data-checked:border-primary/48 has-data-checked:bg-accent/50">
      <Checkbox defaultChecked />
      <div className="flex flex-col gap-1">
        <p>Enable notifications</p>
        <p className="text-muted-foreground text-xs">
          You can enable or disable notifications at any time.
        </p>
      </div>
    </Label>
  );
}

Installation

npx shadcn@latest add @coss/p-checkbox-4

Usage

import { PCheckbox4 } from "@/components/p-checkbox-4"
<PCheckbox4 />