Checkbox

Guidelines#

Use it for settings that apply on Save, multi-select lists and table row selection (checked="indeterminate" on the header for a partial selection). For choices that apply immediately use Switch.

What you provide: id and a Label beside it (clicking the label toggles), checked/onCheckedChange or defaultChecked, disabled, aria-invalid for a required consent.

Anatomy: input border, 4px radius, shadow-xs; checked = primary fill with primary-foreground tick. Completing a task adds the task-complete-pop bloom and two sparks around the box (360–520ms); under reduced motion it simply checks.

Facts#

API#

TypeScript declarations emitted from src/components/ui/checkbox.tsx (the module also exports its other parts).

declare function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>): any;
export { Checkbox };

Example#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
function Row(id, text, props) {
  return h("div", { className: "flex items-center gap-3" },
    h(DC.Checkbox, Object.assign({ id: id }, props)),
    h(DC.Label, { htmlFor: id, className: "font-normal" }, text));
}
function App() {
  return h("div", { className: "flex flex-col gap-4" },
    Row("cb-1", "Send the recap to the attendees", { defaultChecked: true }),
    Row("cb-2", "Create follow-up tasks from action items", {}),
    Row("cb-3", "Select all 24 prospects", { checked: "indeterminate" }),
    Row("cb-4", "Log calls to HubSpot (connect HubSpot first)", { disabled: true }),
    Row("cb-5", "I accept the data processing terms", { "aria-invalid": true }));
}
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>

More in Forms#