Checkbox

npx shadcn@latest add https://ui.saasflare.io/r/checkbox.json

pnpm add @saasflare/ui

"use client"import { Checkbox, Label } from "@saasflare/ui"/** A checkbox paired with a clickable label. */export function Demo() {    return (        <div className="flex items-center gap-2">            <Checkbox id="terms" />            <Label htmlFor="terms">I agree to the terms of service</Label>        </div>    )}

"use client"import { useState } from "react"import { Checkbox, Label } from "@saasflare/ui"/** A controlled checkbox driving local state. */export function Demo() {    const [checked, setChecked] = useState(true)    return (        <div className="flex flex-col gap-2">            <div className="flex items-center gap-2">                <Checkbox                    id="auto-deploy"                    checked={checked}                    onCheckedChange={(value) => setChecked(value === true)}                />                <Label htmlFor="auto-deploy">Auto-deploy on push to main</Label>            </div>            <p className="text-sm text-muted-foreground">                {checked ? "Deploys run automatically." : "Deploys are manual."}            </p>        </div>    )}

"use client"import { Checkbox, Label } from "@saasflare/ui"/** Default, checked, and disabled checkbox states. */export function Demo() {    return (        <div className="flex flex-col gap-3">            <div className="flex items-center gap-2">                <Checkbox id="newsletter" />                <Label htmlFor="newsletter">Product newsletter</Label>            </div>            <div className="flex items-center gap-2">                <Checkbox id="security" defaultChecked />                <Label htmlFor="security">Security alerts</Label>            </div>            <div className="flex items-center gap-2">                <Checkbox id="beta" disabled />                <Label htmlFor="beta">Beta features (unavailable on Free)</Label>            </div>        </div>    )}