Input React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Usage

Import Input from @/components/ui/input.

import { useRef, useState } from "react"
import { CircleCheck, MapPin } from "lucide-react"
import { Input } from "@/components/ui/input"

export function ListingDetails() {
  const [title, setTitle] = useState("")
  const [user, setUser] = useState("emma.carter")
  const [checking, setChecking] = useState(false)
  const timer = useRef<ReturnType<typeof setTimeout>>(undefined)

  return (
    <form className="flex flex-col gap-4">
      <Input
        name="title"
        label="Listing title"
        placeholder="e.g. Trek FX 2 city bike"
        value={title}
        onValueChange={setTitle}
        error={title && title.length < 10 ? "The title needs at least 10 characters." : undefined}
        showCount
        maxLength={70}
        required
        enterKeyHint="next"
      />
      <Input name="price" label="Price" prefix="$" inputMode="decimal" selectOnFocus defaultValue="1,250" />
      <Input name="city" label="City" leftIcon={<MapPin />} clearable autoComplete="address-level2" />
      <Input
        label="Username"
        value={user}
        onValueChange={(next) => {
          setUser(next)
          // the check runs 1.4s after the last keystroke
          setChecking(true)
          clearTimeout(timer.current)
          timer.current = setTimeout(() => setChecking(false), 1400)
        }}
        loading={checking}
        rightIcon={<CircleCheck className="text-success-soft-foreground" />}
        autoCapitalize="none"
        enterKeyHint="done"
      />
    </form>
  )
}

Props

• labeldefault ""
  ReactNode

  Renders the field anatomy around the box: the label above it, linked with htmlFor. With floatingLabel it moves inside the box. Leave it empty for a bare input (then pass aria-label).

• descriptiondefault ""
  ReactNode

  Helper text under the box, linked with aria-describedby. The error takes its place while it shows.

• errordefault ""
  ReactNode

  Replaces the description with an alert icon and the text, slides in and marks the field invalid (red ring, aria-invalid). Empty means no error.

• requireddefault false
  boolean

  The red mark after the label (hidden from screen readers) and the native required attribute.

• invaliddefault false
  boolean

  The invalid look and aria-invalid without a message, for forms that show the error somewhere else.

• disableddefault false
  boolean

  Dims the field to 50% and blocks input; the native input is disabled, so the form does not submit it.

• readOnlydefault false
  boolean

  The value stays visible, selectable and submitted, but cannot change; the box drops its hover tint and the clear button. The demo fills in a sample value.

• placeholderdefault ""
  string

  Hint text while the field is empty. With a floating label it only shows while the label is floated (on focus, or always next to a prefix), never behind it.

• defaultValuedefault ""
  string

  The starting text while uncontrolled. Pass value and onValueChange instead to control it; a value set by a form library straight on the element shows up in the counter after the next focus.

• prefixdefault ""
  ReactNode

  Text before the input, like "https://" or "+40", in the muted addon look (long text truncates at 40% of the box), or an element rendered as is. A click on it lands in the input.

• suffixdefault ""
  ReactNode

  Text after the input, like "USD" or "@company.com", or an element such as a small Apply button. Buttons inside keep the input focused while pressed.

• clearLabeldefault "Clear"
  string

  The clear button's accessible name and hover title. The demo passes Clear text (the City field always shows one).

• loadingLabeldefault "Loading"
  string

  What screen readers hear for the spinner while loading. The demo passes Checking.

• namedefault ""
  string

  The form field name. It lands on the native input, so FormData, autofill and {...register('titlu')} from react-hook-form work as on a plain input.

• sizedefault "md"
  "sm" | "md" | "lg"

  Height 32 / 40 / 48px with 13 / 14 / 15px text (16px on phones so iOS never zooms); md grows to 44px on touch. Floating labels make the box 44 / 52 / 60px.

• variantdefault "soft"
  "soft" | "outline" | "underline" | "ghost"

  soft is a filled well that works on every surface, outline a bordered box, underline a bottom line that grows a bar from the center on focus, ghost has no fill until hover (toolbars, table cells).

• radiusdefault "md"
  "none" | "sm" | "md" | "lg" | "full"

  Corner shape, scaled with the size like the button's (md is 8 / 10 / 12px); full makes a pill. Ignored by underline.

• accentdefault ""
  string

  Any CSS color for the focus ring, the outline border and underline bar on focus, and the caret. Empty uses the ring token (the brand orange).

• floatingLabeldefault false
  boolean

  The label sits inside the box like a placeholder and floats up, at 80%, on focus, when filled or when autofilled (CSS only, so it is right before hydration). The box grows to 44 / 52 / 60px for the room. Needs label; a prefix keeps it floated.

• loadingdefault false
  boolean

  A small spinner at the end, in place of the right icon when there is one, and aria-busy. The input stays editable, e.g. while checking if a username is free.

• typedefault "text"
  InputType: "text" | "email" | "url" | "tel" | "search" | "password" | "number"

  The native type, which also picks the phone keypad (email, url, tel, search). number renders a text field with a decimal keypad, so maxLength works and a scroll never changes it; number-input adds steppers and locale parsing, password-input the reveal button.

• clearabledefault false
  boolean

  A clear button pops in while there is a value (never when disabled or read-only). It stays out of the Tab order; Escape clears from the keyboard. Focus stays in the input.

• showCountdefault false
  boolean

  The "12 / 70" counter at the end of the message row, amber from 90% and red at the limit. Needs maxLength.

• maxLengthdefault 0
  number

  The native character limit, also the counter's maximum. 0 means no limit.

• selectOnFocusdefault false
  boolean

  Selects the whole text when the field takes focus, by click, tap or Tab, so typing replaces it. For codes and amounts.

• value
  string

  The text, controlled. Without onValueChange typing does nothing (like React); use readOnly for a fixed value.

• onValueChange
  (value: string) => void

  Fires with the new text on every edit, including a clear.

• onChange
  (event: ChangeEvent<HTMLInputElement>) => void

  The native change event, untouched. A clear fires it too, like a keystroke.

• onClear
  () => void

  Called after the clear button or Escape emptied the field. Focus is already back in the input.

• leftIcon
  ReactNode

  A leading icon in the muted color; unsized svgs follow the size (14 / 16 / 18px). A click on it lands in the input.

• rightIcon
  ReactNode

  A trailing icon, e.g. a green check after a successful check. It pops in and out, and crossfades with the spinner while loading.

• clearIcon
  ReactNode

  Replaces the clear button's icon (a 16px X by default).

• fieldProps
  Partial<FieldProps>

  Anything else for the Field wrapper: optional and optionalLabel, labelAction, orientation, labelWidth, hideLabel, counterLabel, requiredIndicator.

• id
  string

  The native input's id. Defaults to useId(); inside a <Field> the Field's id wins.

• ref
  RefObject<HTMLInputElement | null> or (node) => void

  The native input. Every other native prop lands there too: inputMode (defaults from the type), enterKeyHint, autoComplete, pattern, spellCheck, autoCapitalize, onBlur, onKeyDown, aria-* and data-*.

• classNames
  Partial<Record<"field" | "label" | "description" | "error" | "counter" | "box" | "input" | "prefix" | "suffix" | "leftIcon" | "rightIcon" | "clear" | "spinner" | "floatingLabel", string>>

  Extra classes for the inner parts. box targets the field box, input the native element.

• className
  string

  Classes for the outermost element: the Field root when there is a label, description, error or counter, else the box.

FAQ

Used in

More React input components