Aria API
This page provides an overview of the Aria component API, detailing its props, emits, slots, and exposed methods/states.
Props
The Aria component accepts the following props:
| Prop | Default | Type | Description |
|---|---|---|---|
placeholder | "" | string or undefined | Placeholder text for the input field. |
autocomplete | "on" | "on" or "off" or undefined | Autocomplete behavior for the input field. |
wrap | "soft" | "soft" or "hard" or "off" or undefined | Text wrapping behavior for the input field. |
rows | 3 | number or undefined | Number of visible rows for text input (applies to textarea elements). |
maxLength | 9999 | number or undefined | Maximum allowed length of the input field's value. |
classInput | "" | StyleClass or undefined | Custom CSS class for the input element. |
id | undefined | string or undefined | Unique identifier for the input element. |
modelValue | undefined | string or number or null or undefined | The current value of the input field. |
Emits
The Aria component emits the following events:
| Emit | Payload | Description |
|---|---|---|
focus | FocusEvent | Emitted when the input field gains focus. |
blur | FocusEvent | Emitted when the input field 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. |
Slots
The Aria 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 Aria component exposes the following methods and states via ref:
| Expose | Value | Description |
|---|---|---|
layout | InputLayoutExpose or undefined | Reference to the input layout state. |
inputRef | HTMLElement or undefined | Reference to the input HTML element. |
id | AriaProps["id"] | Current id value of the input field. |
modelValue | AriaProps["modelValue"] | Current modelValue of the input field. |
placeholder | AriaProps["placeholder"] | Current placeholder of the input field. |
autocomplete | AriaProps["autocomplete"] | Current autocomplete setting for the input field. |
wrap | AriaProps["wrap"] | Current wrapping behavior for the input field. |
rows | AriaProps["rows"] | Current number of rows for the input field. |
maxLength | AriaProps["maxLength"] | Current maximum length for the input field. |
isValue | InputLayoutProps["isValue"] | Indicates whether the input has a value. |
mode | AriaProps["mode"] | Current mode of the input field. |
isDisabled | AriaProps["disabled"] | Indicates whether the input is disabled. |
isLoading | AriaProps["loading"] | Indicates whether the input is in a loading state. |
isInvalid | AriaProps["isInvalid"] | Indicates whether the input is invalid. |
messageInvalid | AriaProps["messageInvalid"] | Validation error message for the input field. |
classStyle | AriaProps["class"] | CSS class for the input container. |
Methods:
clear(): void- Clears the input field value and resets the invalid state.focus(env: FocusEvent): void- Focuses the input field and sets the active state.blur(env: FocusEvent): void- Removes focus from the input field and resets the active state.