Forms
Input
A single-line text input with optional leading/trailing icon and validation states.
<UiInput />Model value
modelValue is the field's value, two-way bound.
Nothing typed yet
Type
type is passed straight to the native input, so the browser's own keyboard, autofill and validation follow from it. email and tel are worth setting on mobile even when you validate yourself.
Placeholder
placeholder is shown while the field is empty. It's a hint, not a label — it disappears the moment someone types, so anything they need to keep belongs in a FormField label instead.
Disabled
disabled disables the input and applies a disabled style.
Variant
variant picks between the ringed outline field that highlights on focus and the lightly tinted soft one with no ring until focused.
Icon left
iconLeft is an icon before the field's text — a magnifying glass on a search box, a globe on a URL.
Icon right
iconRight puts a glyph after the value — the place for an affordance that follows the input rather than labels it, like a clear button or a unit.
Wrapped in FormField
API Reference
Generated from the component's source — props, slots and emits as the component actually declares them.
Props
Emits
update:modelValue[value: string]