Next.js Input for the App Router

Drivn installs through a small CLI that writes the component source directly into your repository — there is no runtime npm package to version-lock. From the root of your Next.js 16 project run npx drivn add input. The Input has no component dependencies and no icon imports, so the CLI writes a single input.tsx file and nothing else. The CLI reference documents every flag, including targeting a custom directory or installing several components at once. After install you own the file; future Drivn releases will not overwrite it. Commit the change for a clean baseline before you start wiring it into forms, and confirm the file landed under your UI directory in the editor.

Unlike a dropdown or a drawer, the Input holds no state and runs no effect, so its source has no 'use client' directive. That means you can import and render it inside a server component with zero client JavaScript shipped for the field itself. The component is a React.forwardRef around a native <input> that spreads every standard HTML input attribute through {...props} — type, placeholder, name, required, defaultValue, and the rest all pass straight to the DOM element. Set type to match the field (email, password, search, number) and the browser handles validation and virtual keyboards for free. Because it is a plain server-renderable element, an uncontrolled input inside a <form> needs no hooks in your code at all. See the installation guide for project setup.

Because the Input renders on the server and forwards every native attribute, it drops straight into the App Router's Server Action form pattern with no client boundary. Give each field a name, attach a server function to the form's action, and read the values off FormData on the server — no onChange, no useState, no client component. This is the fastest possible form in Next.js: the browser posts the form natively, the action runs on the server, and the field never needed to hydrate. Add required or type="email" to lean on native browser validation before the request is even sent. For richer client-side validation, the next section switches the same Input into a controlled field.

When the field drives live UI — a search box filtering a list, a form with per-keystroke validation, or a react-hook-form integration — move it into a client component and 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 know. For form libraries, the forwardRef matters: register('email') from react-hook-form spreads a ref and change handlers onto the field, and because the Input forwards its ref to the underlying element, the library reads and focuses it directly. No adapter or Controller wrapper is required for the common case. Mark the component 'use client' and keep it small so only the interactive part hydrates.

Every class the Input renders lives in a single styles.base string at the top of the file you own after install — there are no size or variant maps to learn. 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 in your app updates at once, and because the colors read from your Tailwind tokens (border-input, text-foreground, text-muted-foreground), changing them in theming re-themes the field for dark and light mode automatically. The className prop merges through cn() for per-instance overrides — pass className="h-12" to make one field taller without touching the base. The styles.base slice below is copied verbatim from input.ts.