Input

Single-line text field for short free-form values — name, email, search query, URL. Reach for Textarea instead when the answer runs to multiple lines, and a Select/Combobox when the value comes from a fixed set of options. Flat fill (white in light, border at 10%), rounded 6px corners. Pass iconLeading/iconTrailing for inline icons, or invalid for the error state. Size to context: md (32px) is the default for standalone and form-row inputs, sm (28px) for dense/inline/table rows, lg (36px) for hero/presence — match the height of any Button or Select beside it.

Basic

import { Input } from "@liquidai/react";

<Input placeholder="you@example.com" />

Sizes

<>
  <Input size="lg" placeholder="lg — 36px (matches the large button)" />
  <Input size="md" placeholder="md — 32px (default, standalone / row-full)" />
  <Input size="sm" placeholder="sm — 28px (inline / dense / table filter rows)" />
</>

Round (pill)

<Input round placeholder="Search…" />

When to pick which size

md (32px) — standalone inputs, inputs in a form row that owns a full horizontal row, anything next to a Button or Select at md.
sm (28px) — inline / dense contexts: table filter rows, command bars, inline edit chips. Don't pair an sm Input with an md Button — match heights.
Heights are minimums, not fixed. A file input with a taller native "Choose File" button pushes the control to fit; it won't clip.

With icons

import { Search, AtSign } from "lucide-react";

<>
  <Input placeholder="Search…" iconLeading={<Search />} />
  <Input placeholder="you@example.com" iconLeading={<AtSign />} />
</>

States

<>
  <Input placeholder="Default" />
  <Input disabled defaultValue="can't edit me" />
  <Input readOnly defaultValue="read only" />
  <Input invalid defaultValue="not-an-email" />
</>

Types

Choose FileNo file chosen

<>
  <Input type="email" placeholder="Email" />
  <Input type="password" defaultValue="hunter2" />
  <Input type="number" defaultValue={42} />
  <Input type="file" />
</>

Props

Prop	Type	Default
invalid	boolean	false
disabled	boolean	false
iconLeading	ReactNode	—
iconTrailing	ReactNode	—
…rest	InputHTMLAttributes	—

Source

packages/react/src/components/input.tsx