How to Add an Input to a React App

Before installing the Input, 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. Unlike compound components such as the dropdown or dialog, the Input pulls in no other Drivn components and no lucide-react icons — it is a single self-contained file, which makes it the simplest component to add first when you are trying Drivn in an existing app.

Run the CLI from your project root to add the Input source file. The command prompts once for your install directory (defaulting to src/components/ui/), writes input.tsx, and finishes — there are no dependencies to resolve, so nothing else is written to your project and nothing is added to package.json. No global config file is created; the result is one TypeScript file you edit like any other component. Confirm it landed in your editor, then commit it for a clean baseline. If your project uses a monorepo layout or a non-standard source path, the CLI docs cover the flags for targeting a custom location during install.

Open the page where the field should live and import Input from your UI directory. In its simplest form it is a drop-in replacement for a native <input>: <Input type="email" placeholder="Email address" />. Because the component spreads {...props} onto the underlying element, every attribute you would set on a raw input works unchanged — type, name, placeholder, required, defaultValue, autoComplete, readOnly. Set type to match the field (email, password, search, number) and the browser handles the on-screen keyboard and native validation for free. An uncontrolled field inside a <form> needs no state and no handlers in your code at all — read the values from FormData on submit. See the Input docs for the full prop table, all of which are the native input attributes.

When the field drives live UI — a search box filtering a list, a form validating on each keystroke — control it with value and onChange. The Input passes both through {...props} to the native element, so it behaves exactly like a raw <input> you already control. Hold the value in useState, pass it as value, and update it from e.target.value in onChange. In a Next.js App Router project this is the point where the component needs a client boundary: mark the file 'use client' because useState runs in the browser, and keep it small so only the interactive field hydrates. The example below is a controlled search box; the same shape covers an email field that validates as you type or a slug field that lowercases input on change.

For real forms, react-hook-form is the common pairing, and the Input needs no adapter for it. Because the component is a React.forwardRef, spreading register('email') onto it hands the library the ref, change, and blur handlers it needs to read and focus the field — no Controller wrapper required for the native case. Styling is just as direct: every class lives in one styles.base string at the top of the file you own. It sets the box (w-full h-10 px-4 border border-input rounded-[10px]), the text and placeholder colors, a focus:outline-none with a color transition, and the disabled treatment. Edit that one object and every input updates at once; pass a className like h-12 for a one-off, since it merges through cn(). Because the colors read from Tailwind tokens, changing them in theming re-themes every field for dark and light mode.