Text Field

Single-line text input control with control radius (--radius-lg), leading/trailing icon slots, and optional label/hint wrapper.

// Plain markup
import { TextField } from "@shavin/ui";

Default usage

const [value, setValue] = useState("");

<TextField
  className="w-64"
  placeholder="Enter a value…"
  value={value}
  onChange={(e) => setValue(e.target.value)}
/>

With Icons

{/* Leading Icon */}
<TextField placeholder="Search…" leadingIcon={<SearchIcon />} />

{/* Trailing Icon */}
<TextField placeholder="you@example.com" trailingIcon={<MailIcon />} />

{/* Both Icons */}
<TextField placeholder="Search email…" leadingIcon={<SearchIcon />} trailingIcon={<MailIcon />} />

Variants (Invalid & Disabled)

{/* Invalid state */}
<TextField placeholder="Required field" invalid defaultValue="bad value" />

{/* Disabled state */}
<TextField placeholder="Can't touch this" disabled />

Sizes

<TextField size="sm" placeholder="Small" />
<TextField size="md" placeholder="Medium" />
<TextField size="sm" placeholder="Small + icon" leadingIcon={<SearchIcon />} />

Props

Prop	Type	Default
leadingIcon	ReactNode	—
trailingIcon	ReactNode	—
label	string	—
hint	string	—
size	"sm" \| "md"	"md"
invalid	"true" \| "focus" \| "false"	"false"