React Input Component Examples

The minimum viable Input is a type and a placeholder; leave type off entirely and the browser assumes text. Everything else native comes along for free — name, id, required, autoComplete, inputMode, value, defaultValue, onChange, onBlur — because the prop type is exactly React.InputHTMLAttributes<HTMLInputElement> with nothing filtered out. Visually you get a forty-pixel-tall field, a ten-pixel radius, sixteen pixels of horizontal padding, a muted placeholder drawn from the Drivn surface tokens, and a three-pixel ring-ring/50 focus ring bound to focus-visible rather than focus, so it appears for keyboard focus and stays quiet on a mouse click.

Ref forwarding is the other half. React.forwardRef puts the ref on the underlying <input>, so useRef gives you imperative .focus() and .select(), and register from a form library lands its ref exactly where it expects to. Controlled fields take value and onChange; uncontrolled fields take defaultValue and read back through the ref or the surrounding form's FormData. Nothing about the wrapper changes how either mode behaves, so existing form code drops in unchanged.

The native type attribute switches the keyboard and validation behavior of the input — email opens the email keyboard on iOS and triggers built-in format validation, password masks characters and opts the field out of autofill suggestions, number opens the numeric keyboard and accepts only numeric characters, search adds a clear button in some browsers. Drivn passes the type straight through to the native input, so every browser-native behavior works out of the box without extra props on the component.

Pair type="email" with autoComplete="email" and inputMode="email" for the best mobile keyboard. Pair type="password" with autoComplete="current-password" on sign-in and autoComplete="new-password" on sign-up. Pair type="number" with min, max, and step for guided numeric entry. The Input forwards every one of these attributes because they live on React.InputHTMLAttributes<HTMLInputElement>. See the Input docs for the full attribute list.

Every production form pairs an input with a label and, usually, a helper paragraph. The pattern is <label> over <input> over <p> — the label provides the accessible name, the input captures the value, the helper paragraph explains the format or shows a validation error. Use Drivn's Label component for the label so the font and color match the rest of the form rhythm, set htmlFor to the input's id, and put the helper paragraph at text-xs text-muted-foreground for the muted style or text-destructive for an error.

The id on the input and the htmlFor on the label do the accessibility work — screen readers announce the label when the input is focused, and clicking the label focuses the input. For a generated id, use React's useId hook so the id stays stable across re-renders without colliding with other fields on the page.

The Drivn Input has no built-in error variant — error visuals live at the field-wrapper level. The pattern is to set aria-invalid={true} on the input when an error string is present and add aria-[invalid=true]:border-destructive to styles.base after install (one-line edit), then render a destructive paragraph under the input with the message. The aria-invalid attribute is also the right accessibility primitive: screen readers announce the field as invalid, and assistive tech links the helper paragraph through aria-describedby if you set it.

The field stays composable: a Label on top, the Input with aria-invalid, an aria-describedby reference, and a destructive paragraph underneath. The same shape works whether the error string comes from a synchronous validator, a server response, or react-hook-form's formState.errors. See Drivn vs shadcn Input for how shadcn handles the same pattern with a built-in aria-invalid style.

A search bar usually shows a magnifying-glass icon on the left edge of the input. Drivn's Input has no leftIcon prop — the recommended pattern is a relative wrapper that absolutely positions a Lucide icon inside the input's padding area, then bumps the input's pl-10 so the text starts past the icon. The wrapper lives in your form code rather than on the Input itself, which keeps the Input file at its minimal size and lets you reuse the same wrapper for trailing icons, clear buttons, or character-count badges.

The icon goes inside the wrapper at absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none. The pointer-events-none rule matters: without it, clicking the icon swallows the click that would otherwise focus the input. For a clear button on the right, swap to right-2, drop the pointer-events-none, and wire an onClick that resets the input value. Pair this with the Command component when the search drives a results list.

For real forms, wire the Input to react-hook-form and zod. Define a zod schema with the field types and constraints, pass it through zodResolver into useForm, and spread register("fieldName") onto the Input. The register function returns name, onChange, onBlur, and ref props — every one of those works on Drivn's Input because it forwards ref through React.forwardRef and accepts every native input attribute.

The error message comes from formState.errors[fieldName]?.message. Pair it with the aria-invalid pattern from the previous section to get a fully accessible field with synchronous validation, ref forwarding, and a destructive helper paragraph in roughly twenty lines of JSX. The same pattern scales to multi-field forms — pair Input with Textarea, Select, and Checkbox and submit the whole form through handleSubmit.