InputLayout API
This page provides an overview of the InputLayout component API, detailing its props, emits, slots, and exposed methods/states.
Props
The InputLayout component accepts the following props:
| Prop | Default | Type | Description |
|---|---|---|---|
value | null | any | The value of the input element within the layout. |
isValue | false | boolean or undefined | Indicates whether the input has a value. |
mode | "outlined" | StyleMode or undefined | Styling mode for the input layout. |
label | "" | string or undefined | The label text for the input. |
labelMode | "offsetDynamic" | LabelMode or undefined | The mode for displaying the label. |
isInvalid | false | boolean or undefined | Indicates whether the input is invalid. |
messageInvalid | "" | string or undefined | The validation error message for the input. |
required | false | boolean or undefined | Marks the input as required. |
loading | false | boolean or undefined | Indicates whether the input is in a loading state. |
disabled | false | boolean or undefined | Disables the input field. |
help | "" | string or undefined | Additional help text displayed for the input. |
clear | false | boolean or undefined | Enables a clear button for the input. |
width | "" | TWidth or undefined | Width of the input layout. |
height | "38px" | THeight or undefined | Height of the input layout. |
animation | "transition-all duration-550" | "transition-all duration-500" or "transition-none" or string or undefined | Animation type for transitions within the layout. |
classBody | "mb-6 rounded-md" | StyleClass or "mb-6 rounded-md" or undefined | Custom CSS class for the body of the layout. |
class | "" | StyleClass or undefined | Custom CSS class for the layout container. |
Emits
The InputLayout component emits the following events:
| Emit | Payload | Description |
|---|---|---|
clear | void | Emitted when the clear button is clicked. |
Slots
The InputLayout component provides the following slots:
| Slot | Payload | Description |
|---|---|---|
default | VNode[] | Default slot for custom content inside the input layout. |
before | VNode[] | Slot for content to be displayed before the input field. |
after | VNode[] | Slot for content to be displayed after the input field. |
body | VNode[] | Slot for additional content within the input layout. |
Expose
The InputLayout component exposes the following methods and states via ref:
| Expose | Value | Description |
|---|---|---|
input | HTMLElement or undefined | Reference to the input element within the layout. |
inputBody | HTMLElement or undefined | Reference to the input body container. |
beforeInput | HTMLElement or undefined | Reference to the element before the input. |
afterInput | HTMLElement or undefined | Reference to the element after the input. |
headerHeight | number | The height of the header in the layout. |
isCopy | boolean | Indicates whether the input value is copied. |
beforeWidth | number or null | The width of the element before the input. |
afterWidth | number or null | The width of the element after the input. |
value | InputLayoutProps["value"] | The current value of the input. |
isValue | InputLayoutProps["isValue"] | Indicates whether the input has a value. |
mode | InputLayoutProps["mode"] | The current styling mode of the input layout. |
label | InputLayoutProps["label"] | The current label text for the input. |
labelMode | InputLayoutProps["labelMode"] | The current label display mode. |
labelType | InputLayoutProps["labelMode"] | The type of label display mode currently applied to the input layout. |
isRequired | InputLayoutProps["required"] | Indicates whether the input is required. |
isLoading | InputLayoutProps["loading"] | Indicates whether the input is in a loading state. |
isDisabled | InputLayoutProps["disabled"] | Indicates whether the input is disabled. |
isInvalid | InputLayoutProps["isInvalid"] | Indicates whether the input is invalid. |
messageInvalid | InputLayoutProps["messageInvalid"] | The validation error message for the input. |
help | InputLayoutProps["help"] | The help text for the input. |
width | InputLayoutProps["width"] | The width of the input layout. |
height | InputLayoutProps["height"] | The height of the input layout. |
animation | InputLayoutProps["animation"] | The animation applied to the layout. |
classBody | InputLayoutProps["classBody"] | Custom CSS class for the body of the layout. |
class | InputLayoutProps["class"] | Custom CSS class for the layout container. |
Methods:
copy(): void- Copies the current value of the input to the clipboard.