Input

Single-line text field. Pass iconLeading/iconTrailing for inline icons, or invalid for the error state.

Basic

import { Input } from "@tidal-ds/react";

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

Sizes

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

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