Text, number, textarea
One directive, three native inputs, three leaf types: text → string, number → number, textarea → string.
- Category
- Directive binding
- Elements
<input type="text"> · <input type="number"> · <textarea>- Modifiers
.lazy · .trim · .number- Auto-installed
- Yes
Type into all three inputs and watch the JSON readout update. The number input's value lands as a number (not a string), even though the DOM only deals in strings. The directive handles the leaf-type coercion; the Schema-driven coercion page explains the rule that powers it.
Bind any of the three
<input v-register="form.register('name')" type="text" />
<input v-register="form.register('age')" type="number" />
<textarea v-register="form.register('bio')" />
All three follow the same write pattern: input event → directive reads the DOM value → coerces to the schema leaf type → writes to storage. No wrapper, no per-element binding code.
Modifiers
Three modifiers apply across all text-family inputs:
<input v-register.lazy="form.register('name')" type="text" />
<input v-register.trim="form.register('name')" type="text" />
<input v-register.number="form.register('age')" type="text" />
| Modifier | Effect |
|---|---|
.lazy | Writes fire on change / blur instead of every input event. Matches Vue's v-model.lazy semantics. |
.trim | Strips leading and trailing whitespace before the write. |
.number | Coerces the DOM string to a number before the write. Useful when type="text" is required but the schema leaf is z.number(). |
The full set lives in the Modifiers page; .number and <input type="number"> are documented side-by-side there.
Numeric inputs without type="number"
<input type="number"> is the most direct bind, but it has spotty UX: some browsers swallow non-digit input on the fly, others allow it; decimal separators (. vs ,) vary by locale; the spinner buttons can confuse keyboard users. When you want a numeric value in storage but full control of the keyboard, reach for <input type="text" inputmode="numeric"> paired with the .number modifier:
<input v-register.number="form.register('age')" type="text" inputmode="numeric" />
inputmode="numeric" is a regular DOM attribute. The directive doesn't intercept it; it passes through to the element. Mobile browsers show the numeric keyboard, desktop browsers accept any keystrokes, and the .number modifier coerces the DOM string to a number on write.
Where to next
- Modifiers:
.lazy,.trim,.numberin depth. - Register transforms: composable per-field write transforms.
- Schema-driven coercion: how the directive maps DOM strings to leaf types.