An animated checkbox with a drawn check mark, an indeterminate state for select all, labels and descriptions, and classic or soft styles. Themed with shadcn tokens.
"use client";
import * as React from "react";
import { Checkbox, type CheckboxCheckedState } from "@/components/ui/checkbox";
const settings = {
variant: "classic",
checkboxSize: "md",
};
const TASKS = [
{ id: "design", label: "Review the design spec", description: "Figma file shared by the product team." },
{ id: "api", label: "Wire up the billing API", description: "Webhooks and retry logic." },
{ id: "qa", label: "QA on mobile Safari", description: "Focus on the checkout flow." },
];
export default function CheckboxDemo(props: Partial<typeof settings>) {
const s = { ...settings, ...props };
const variant = s.variant as "classic" | "soft";
const size = s.checkboxSize as "sm" | "md" | "lg";
const [done, setDone] = React.useState<Record<string, boolean>>({ design: true });
const count = TASKS.filter((t) => done[t.id]).length;
const all: CheckboxCheckedState =
count === TASKS.length ? true : count === 0 ? false : "indeterminate";
return (
<div className="flex min-h-[420px] w-full items-center justify-center bg-background p-6">
<div className="w-full max-w-md rounded-xl border border-border bg-card p-6 text-card-foreground shadow-sm">
<div className="flex items-center justify-between border-b border-border pb-4">
<Checkbox
variant={variant}
checkboxSize={size}
checked={all}
onCheckedChange={(next) =>
setDone(Object.fromEntries(TASKS.map((t) => [t.id, next === true])))
}
label="Sprint checklist"
fullWidth={false}
/>
<span className="shrink-0 whitespace-nowrap text-xs text-muted-foreground">
{count} of {TASKS.length} done
</span>
</div>
<div className="space-y-4 pt-4">
{TASKS.map((task) => (
<Checkbox
key={task.id}
variant={variant}
checkboxSize={size}
checked={!!done[task.id]}
onCheckedChange={(next) => setDone((d) => ({ ...d, [task.id]: next === true }))}
label={task.label}
description={task.description}
/>
))}
</div>
</div>
</div>
);
}