TextInput

Single-line text input with optional leading icon, optional prefix text after the icon, and optional trailing suffix. Supports multiple HTML input types, four sizes, three visual variants, and callbacks for both input and change events.

import { TextInput, PhiIcons } from 'phoundry-ui';

Basic

Value: (empty)

Show code

<TextInput value={name} oninput={(v) => name = v} placeholder="Your name" />

With Icon

Show code

<TextInput
  value={query}
  oninput={(v) => query = v}
  placeholder="Search..."
  icon={PhiIcons.search}
/>

Clearable

The clear button appears only when the input has a value.

Show code

<TextInput
  value={text}
  oninput={(v) => text = v}
  placeholder="Type something..."
  clearable
/>
<TextInput
  value={query}
  oninput={(v) => query = v}
  icon={PhiIcons.search}
  placeholder="Search..."
  clearable
/>

Suffix

.md

Show code

<TextInput value={name} oninput={(v) => name = v} suffix=".md" placeholder="notes" />
<TextInput value={name} oninput={(v) => name = v} suffix=".md" suffixBg placeholder="notes" />

Prefix

USD

Show code

<TextInput value={amount} oninput={(v) => amount = v} prefix="$" placeholder="0.00" />
<TextInput
  value={id}
  oninput={(v) => id = v}
  icon={PhiIcons.search}
  prefix="#"
  placeholder="lookup"
/>
<TextInput
  value={total}
  oninput={(v) => total = v}
  icon={PhiIcons.search}
  prefix="USD"
  prefixBg
  placeholder="0.00"
/>

Sizes

Show code

<TextInput value={xs} oninput={(v) => xs = v} placeholder="Extra small" size="xs" clearable />
<TextInput value={sm} oninput={(v) => sm = v} placeholder="Small" size="sm" clearable />
<TextInput value={md} oninput={(v) => md = v} placeholder="Medium" size="md" clearable />
<TextInput value={lg} oninput={(v) => lg = v} placeholder="Large" size="lg" clearable />

Read-only & disabled

Show code

<TextInput value={v} oninput={set} readonly />
<TextInput value={v} oninput={set} disabled />

Types (password, search)

Show code

<TextInput type="password" value={pw} oninput={(v) => pw = v} placeholder="Password" />
<TextInput type="search" value={q} oninput={(v) => q = v} placeholder="Search..." icon={PhiIcons.search} />

Variants

Show code

<TextInput variant="outline" placeholder="Outline (default)" />
<TextInput variant="fill" placeholder="Fill" />
<TextInput variant="ghost" placeholder="Ghost" />

Autocomplete

Browser may suggest saved email addresses

Show code

<TextInput
  type="email"
  autocomplete="email"
  placeholder="Email address"
/>

Props

Prop	Type	Default	Description
value	string	''	Current input value (`bind:value` friendly).
onchange	(value: string) => void	—	Fires on blur / Enter after value changes
oninput	(value: string) => void	—	Fires on every keystroke
type	'text' \| 'email' \| 'password' \| 'search' \| 'url' \| 'tel'	'text'	HTML input type
placeholder	string	—	Placeholder text
size	'xs' \| 'sm' \| 'md' \| 'lg'	'md'	Control size aligned to Button scale (`xs` h-4 / 16px … `lg` h-8 / 32px outer box)
variant	'outline' \| 'fill' \| 'ghost'	'outline'	Visual style variant
disabled	boolean	false	Disables the input
readonly	boolean	false	Makes the input read-only
icon	string	—	Iconify icon string shown at the leading edge
prefix	string	—	Fixed text after the icon and before the typed value (e.g. currency symbol)
prefixBg	boolean	false	Inset background on the combined icon/prefix region
suffix	string	—	Fixed text after the typed value (e.g. file extension)
suffixBg	boolean	false	Inset background on the suffix region
clearable	boolean	false	Shows a trailing clear button when the input has a value
class	string	—	Additional CSS classes
id	string	—	HTML id attribute
name	string	—	HTML name attribute for forms
autocomplete	AutoFill	—	Browser autocomplete hint
element	HTMLInputElement	—	Bindable reference to the underlying input element
…rest	HTMLAttributes<input>	—	Forwarded to the inner `<input>` (e.g. `aria-*`, `inputmode`, `maxlength`).

Usage tips

Use oninput for real-time feedback (e.g. live search) and onchange for commit-on-blur behavior.
Set type="search" with an icon for a native-feeling search field that shows a clear button in some browsers.
Pair with FormField to get labels, descriptions, and error messaging for free.