Forms
Input
A single-line text input with optional leading/trailing icon and validation states.
<UiInput />Options
One block per prop — what it does, and what it looks like set.
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.
Clearable
clearable adds a button at the end of the field that empties it, and only once there's something to empty. It writes '' to v-model, so the value you're bound to is what gets cleared. A disabled field never shows it.
Examples
The component in real use: compositions that answer "how do I build X with this", rather than one prop at a time.
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]