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" />

NumberInput

A TextInput that holds a number: the model is number | null (null when empty), so a record form keeps the field's own type instead of parsing strings on save. Every other prop — placeholder, prefix/suffix, icons, state flags — falls through to the TextInput; the browser's spin buttons are hidden.

import { NumberInput } from '@scaler-tech/aurora/input'

m²

<NumberInput v-model="record.gross_floor_area" suffix="m²" placeholder="0" />

The text the user sees stays theirs while it still reads as the same value — "5.0" is not rewritten to "5" mid-typing — and is only replaced when the model changes to something else.

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. Wrap the input in a Field when you also want a label, hint and validation messages around it.

Gotchas

• TextInput type="number" still emits a string — a schema expecting a number fails and a record gets "12" instead of 12. Use NumberInput, whose model is number | null.

Exposed methods

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

<TextInput ref="inputRef" />