TextInput

Single-line free-form text entry. Reach for it whenever the user is typing a string or a number — names, identifiers, search queries, free-form notes, numeric values without a slider or unit picker.

Supports prefix/suffix text, leading/trailing icons, and all validation states (default, error, warning, success, missing, disabled, read-only).

Basic

<TextInput v-model="value" placeholder="Type something" />

With prefix and suffix

Use prefix/suffix for short string adornments — currency symbols, units, etc.

$

kg

<TextInput v-model="amount" prefix="$" placeholder="0.00" />
<TextInput v-model="weight" suffix="kg" placeholder="0" />

With icons

Use leadingIcon/trailingIcon for iconic adornments — search, validation, etc.

<TextInput v-model="query" leading-icon="magnifying-glass" placeholder="Search…" />
<TextInput v-model="value" trailing-icon="calendar" placeholder="Pick a date" />

Validation states

Aurora's form fields share a single set of state flags. Pass exactly one of error, success, warning, or missing at a time.

<TextInput v-model="email" error placeholder="Email" />
<TextInput v-model="email" success placeholder="Email" />
<TextInput v-model="email" warning placeholder="Email" />
<TextInput v-model="email" missing placeholder="Email" />

Disabled and readonly

<TextInput v-model="value" disabled placeholder="Disabled" />
<TextInput model-value="Read only value" readonly />

Props

Prop	Type	Default	Description
modelValue	string | number	—	Two-way bound value. Use with v-model.
defaultValue	string | number	—	Initial value when uncontrolled.
name	string	—	Form field name.
placeholder	string	—	Placeholder text shown when empty.
prefix	string	—	Short text adornment shown before the input.
suffix	string	—	Short text adornment shown after the input.
leadingIcon	IconName	—	Icon shown before the input.
trailingIcon	IconName	—	Icon shown after the input.
autofocus	boolean	false	Focus the input on mount.
error	boolean	false	Apply error state styling.
success	boolean	false	Apply success state styling.
warning	boolean	false	Apply warning state styling.
missing	boolean	false	Apply missing-required-field state styling.
disabled	boolean	false	Disable interactions.
readonly	boolean	false	Render as read-only (no border, no editing).

State flags (error, success, warning, missing, disabled, readonly) are mutually exclusive — passing more than one yields the first that matches. Use FormField (TODO: link when migrated) when you also want labels and validation messages around the input.

Exposed methods

TextInput exposes a focus() method via defineExpose — call inputRef.value?.focus() from a parent.

<TextInput ref="inputRef" />