Radix checkbox with checked, unchecked and indeterminate states for select-all, labelled by its Field so the whole row is the target. Part of the Layro System: layro.vercel.app.
import * as React from "react";
import { Checkbox, Field } from "@/components/ui/layro-checkbox";
/* Checked, unchecked and indeterminate. The select-all row shows the
third state when some invoices are picked, and each row's label is the
click target. */
export default function CheckboxDemo() {
const INVOICES = ["INV-2026-0914", "INV-2026-0814", "INV-2026-0714"];
const [picked, setPicked] = React.useState<string[]>([INVOICES[0]]);
const all = picked.length === INVOICES.length ? true : picked.length ? "indeterminate" : false;
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-6">
<div className="w-full min-w-0 rounded-[18px] [corner-shape:squircle] bg-card p-6 text-card-foreground ring-1 ring-border" style={{ maxWidth: 360 }}>
<h2 className="text-[16px] font-semibold tracking-[-0.01em]">Download invoices</h2>
<div className="mb-5" />
<div className="grid gap-3">
<Field label="Select all invoices" inline>
<Checkbox checked={all} onCheckedChange={(v) => setPicked(v === true ? INVOICES : [])} />
</Field>
<div className="grid gap-3 border-l border-border pl-4">
{INVOICES.map((n) => (
<Field key={n} label={n} inline>
<Checkbox checked={picked.includes(n)} onCheckedChange={(v) => setPicked((p) => (v === true ? [...p, n] : p.filter((x) => x !== n)))} />
</Field>
))}
</div>
<Field label="Email me a copy" inline hint="Sent to the billing contact">
<Checkbox defaultChecked />
</Field>
</div>
</div>
</div>
);
}
Part of Layro System — browse the full library on 21st.dev.