A single control covering text, number (with steppers), password (with a visibility toggle), email, phone and textarea, plus optional leading/trailing icons, a clear button and built-in validation.
Examples
Types
Text, email and phone in one control. Email and phone validate on blur.
<div class="flex max-w-sm flex-col gap-3">
<UiInput v-model="state.name" placeholder="Your name" />
<UiInput v-model="state.email" type="email" icon-left="mdi:email-outline" placeholder="you@example.com" />
<UiInput v-model="state.phone" type="phone" icon-left="mdi:phone-outline" placeholder="+44 20 7946 0000" />
</div>Password and clearable
Password mode adds a visibility toggle; clearable adds a clear button while there is a value.
<div class="flex max-w-sm flex-col gap-3">
<UiInput v-model="state.pw" type="password" placeholder="Password" />
<UiInput v-model="state.q" clearable placeholder="Type, then clear" />
</div>Number stepper layouts
Number mode places the +/- controls four ways via stepper-layout: both-sides, stacked-left, stacked-right or none.
<div class="grid max-w-md gap-4 sm:grid-cols-2">
<label class="text-sm text-gray-500">both-sides
<UiInput v-model="state.n1" type="number" :min="0" :max="10" stepper-layout="both-sides" class="mt-1" />
</label>
<label class="text-sm text-gray-500">stacked-left
<UiInput v-model="state.n2" type="number" :min="0" :max="10" stepper-layout="stacked-left" class="mt-1" />
</label>
<label class="text-sm text-gray-500">stacked-right
<UiInput v-model="state.n3" type="number" :min="0" :max="10" stepper-layout="stacked-right" class="mt-1" />
</label>
<label class="text-sm text-gray-500">none
<UiInput v-model="state.n4" type="number" :min="0" :max="10" stepper-layout="none" class="mt-1" />
</label>
</div>Icons
A leading icon via icon-left and a trailing icon via icon-right.
<div class="flex max-w-sm flex-col gap-3">
<UiInput v-model="state.search" icon-left="mdi:magnify" placeholder="Search" />
<UiInput v-model="state.amount" icon-right="mdi:currency-eur" placeholder="Amount" />
</div>Textarea
Multi-line input; resize can be none, vertical, horizontal or both.
<UiInput v-model="state.note" type="textarea" :rows="3" resize="vertical" placeholder="Drag the corner to resize" class="max-w-sm" />Validation
Built-in validation for email/phone/number, or a custom validation-pattern with a message. Errors appear below the field after blur.
<div class="flex max-w-sm flex-col gap-3">
<UiInput v-model="state.em" type="email" placeholder="Enter an email, then click away" />
<UiInput v-model="state.code" validation-pattern="^[A-Z]{3}$" validation-message="Exactly three uppercase letters." placeholder="ABC" />
</div>Props
| Name | Type | Default | Description |
|---|---|---|---|
| modelValue | string | number | '' | The field value (v-model). |
| type | string | 'text' | Input kind. textnumberpasswordemailphonetextarea |
| placeholder | string | '' | Placeholder text. |
| required | boolean | false | Marks the field required for validation. |
| disabled | boolean | false | Disables the field. |
| readonly | boolean | false | Makes the field read-only. |
| autocomplete | string | undefined | Native autocomplete hint. |
| minlength | number | undefined | Minimum length. |
| maxlength | number | undefined | Maximum length. |
| rows | number | 3 | Textarea rows. |
| resize | string | 'none' | Textarea resize behaviour. noneverticalhorizontalboth |
| minHeight | string | undefined | Minimum height (textarea). |
| maxHeight | string | undefined | Maximum height (textarea). |
| minWidth | string | undefined | Minimum width. |
| maxWidth | string | undefined | Maximum width. |
| pattern | string | undefined | Native validation pattern. |
| showToggle | boolean | true | Show the password visibility toggle. |
| min | number | undefined | Minimum value (number). |
| max | number | undefined | Maximum value (number). |
| step | number | 1 | Step increment (number). |
| stepperLayout | string | 'both-sides' | Where the number steppers sit. stacked-leftstacked-rightboth-sidesnone |
| clearable | boolean | false | Show a clear button when there is a value. |
| iconLeft | string | undefined | Leading MDI icon. |
| iconRight | string | undefined | Trailing MDI icon. |
| validate | boolean | true | Enable built-in validation. |
| validationPattern | string | undefined | Custom validation pattern. |
| validationMessage | string | undefined | Message shown when validation fails. |
Events
| Event | Payload | Description |
|---|---|---|
update:modelValue | string | number | Emitted on input; numbers are coerced for number type. |
validation | { valid: boolean, error: string } | Emitted when the validation state changes. |
Slots
| Slot | Description |
|---|---|
left | Custom content in the left slot (overrides iconLeft). |
right | Custom content in the right slot (overrides iconRight). |