Input API
This page provides an overview of the Input component API, detailing its props, emits, slots, and exposed methods/states.
Props
The Input component accepts the following props:
| Prop | Default | Type | Description |
|---|---|---|---|
type | "text" | "text" or "number" or "email" or "password" | The type of input field. |
autoFocus | false | boolean | Automatically focuses the input field on mount. |
placeholder | "" | string | Placeholder text for the input field. |
autocomplete | "on" | "on" or "off" | Autocomplete behavior for the input field. |
maskInput | "" | "phone" or "number" or "price" or string | Mask type for the input value. |
lengthInteger | null | number | Maximum length for the integer part of the input value. |
lengthDecimal | null | number | Maximum length for the decimal part of the input value. |
classInput | "" | StyleClass | Custom CSS class for the input element. |
id | undefined | string | Unique identifier for the input element. |
modelValue | undefined | string or number or null or undefined | The current value of the input field. |
Emits
The Input component emits the following events:
| Emit | Payload | Description |
|---|---|---|
clear | string | Emitted when the input is cleared. |
focus | FocusEvent | Emitted when the input gains focus. |
blur | FocusEvent | Emitted when the input loses focus. |
update:modelValue | string | Emitted when the modelValue is updated. |
change:modelValue | string | Emitted when the modelValue changes. |
update:isInvalid | boolean | Emitted when the invalid state of the input is updated. |
isActive | boolean | Emitted when the input becomes active. |
Slots
The Input component provides the following slots:
| Slot | Payload | Description |
|---|---|---|
default | VNode[] | Default slot for custom content inside the input component. |
before | VNode[] | Slot for content to be displayed before the input field. |
after | VNode[] | Slot for content to be displayed after the input field. |
Expose
The Input component exposes the following methods and states via ref:
| Expose | Value | Description |
|---|---|---|
layout | InputLayoutExpose or undefined | Reference to the input layout state. |
isActiveInput | boolean | Indicates whether the input is active. |
classLayout | InputProps["class"] | Custom CSS class for the input layout. |
id | InputProps["id"] | Current id of the input field. |
type | InputProps["type"] | Current type of the input field. |
mask | InputProps["maskInput"] | Current mask type applied to the input field. |
modelValue | InputProps["modelValue"] | Current value of the input field. |
autoFocus | InputProps["autoFocus"] | Indicates whether autofocus is enabled. |
placeholder | InputProps["placeholder"] | Current placeholder text of the input field. |
autocomplete | InputProps["autocomplete"] | Current autocomplete setting of the input field. |
lengthInteger | InputProps["lengthInteger"] | Maximum length for the integer part of the input value. |
lengthDecimal | InputProps["lengthDecimal"] | Maximum length for the decimal part of the input value. |
isValue | InputLayoutProps["isValue"] | Indicates whether the input has a value. |
mode | InputProps["mode"] | Current mode of the input. |
isDisabled | InputProps["disabled"] | Indicates whether the input is disabled. |
isLoading | InputProps["loading"] | Indicates whether the input is in a loading state. |
isInvalid | InputProps["isInvalid"] | Indicates whether the input is invalid. |
messageInvalid | InputProps["messageInvalid"] | Validation error message for the input field. |
classBaseInput | InputProps["class"] | CSS class for the input base container. |
Methods:
toMask(baseValue: string | number): string- Applies a mask to the input value.inputModelValue(valueResult: any): void- Updates the input's model value.changeModelValue(valueResult: any): void- Changes the input's model value and triggers the associated event.clear(): void- Clears the input's value.focus(eventFocus: FocusEvent): void- Focuses the input field.blur(eventFocus: FocusEvent): void- Blurs the input field.