How to Add a Checkbox to a React App

Before installing the Checkbox, confirm your React project has the three things Drivn assumes: Tailwind CSS v4 installed and processing your CSS, TypeScript configured (the component ships as a .tsx file), and a @/ path alias pointing at your source directory. If you scaffolded with create-next-app, npm create vite, or npx drivn@latest create, all three are already wired. For a custom setup, check the compilerOptions.paths entry in tsconfig.json; the installation page lists the minimal config. The Checkbox has the lightest dependency surface of any Drivn component — it pulls in lucide-react for the single Check icon and nothing else, since the box, the border, and the checked fill are all Tailwind classes reading from your theme tokens.

Run the CLI from your project root to add the Checkbox source file. The command prompts once for your install directory (defaulting to src/components/ui/), writes checkbox.tsx, and adds lucide-react to your package.json if it is not already present. No global config file is created — the Checkbox is a single TypeScript file in your repo that you edit like any other component. Confirm the file landed in your editor, then commit it. There are no peer components to resolve: unlike the Date Picker or Command, the Checkbox stands alone. If your project uses a monorepo layout or a non-standard path, the CLI docs cover the flags for targeting a custom location during install.

Import the Checkbox from your UI directory and render it with a label prop — that is the entire setup for an uncontrolled checkbox. The component wraps the native input and your label text in a single <label> element, so clicking the text toggles the box for free; you never wire htmlFor and id by hand. Without a checked prop the component manages its own state internally via useState(defaultChecked ?? false), so it works in a plain form with no React state at all. Pass defaultChecked to start it ticked. Because the source is 'use client', render it inside a client component in a Next.js App Router app. See the Checkbox docs for the full prop table.

To drive the Checkbox from React state, pass both checked and onChange. The source detects controlled mode with const isControlled = checked !== undefined and, when controlled, skips its internal setState and renders whatever boolean you pass. The onChange handler receives the native input change event, so read the next value from e.target.checked and store it. Controlled mode is what you want whenever the checked state drives other UI — a "select all" master checkbox, a submit button gated on a terms box, or a value synced into a form library like react-hook-form. Hold the boolean in useState and bind both props, as below.

Three finishing touches cover most real forms. Pass disabled to dim the control with opacity-50 cursor-default and block interaction — the native input is disabled too, so it is skipped during submission and keyboard tabbing. Because the Checkbox spreads ...props onto the underlying <input>, every standard attribute works: give it a name and value and it submits with a native <form> exactly like any checkbox, or add required for built-in validation. To restyle, open src/components/ui/checkbox.tsx and edit the styles object — box controls the unchecked square (w-4 h-4 rounded-[4px] border border-border) and checked controls the filled state (bg-primary border-primary). Every class reads from your Tailwind tokens, so a theme change in globals re-themes every Checkbox at once. See the Checkbox examples for grouped lists and form layouts.