Layout

Input Layout component is used to create a form layout with a label and input field.

The InputLayout component is a wrapper used to manage input fields with labels, validation, and additional features. Although it is not recommended to use InputLayout directly, it serves as a base component for components Input, select, aria, calendar and textEditor components. This documentation describes the available properties and how to work with them, providing examples for each property.

Properties

mode

Styling mode for the input layout.

Type: StyleMode or undefined

Description: The mode property specifies the styling mode for the input layout. It can be set to different style modes such as outlined, underlined, or filled.

<Input mode="outlined" v-model="value"></Input>
<Input mode="filled" v-model="value"></Input>
<Input mode="underlined" v-model="value"></Input>

label

The label text for the input.

Type: string or undefined

Description: The label property defines the text label for the input field. It is displayed alongside the input element to provide context to the user.

Username

<Input label="Username" v-model="value"/>

labelMode

The mode for displaying the label.

Type: LabelMode or undefined

Description: The labelMode property determines how the label is displayed. It can be set to different modes such as "offsetDynamic", "vanishing", or "static".

Offset Dynamic

Offset Static

Dynamic

Static

Vanishing

<Input label="Offset Dynamic" labelMode="offsetDynamic" v-model="value"></Input>
<Input label="Offset Static" labelMode="offsetStatic" v-model="value"></Input>
<Input label="Dynamic" labelMode="dynamic" v-model="value"></Input>
<Input label="Static" labelMode="static" v-model="value"></Input>
<Input label="Vanishing" labelMode="vanishing" v-model="value"></Input>

isInvalid

Indicates whether the input is invalid.

Type: boolean or undefined

Description: The isInvalid property is a boolean that indicates whether the input element is in an invalid state. It is used for validation purposes.

<Input isInvalid v-model="value"/>

messageInvalid

The validation error message for the input.

Type: string or undefined

Description: The messageInvalid property holds the validation error message that is displayed when the input is invalid.

This field is required.

<Input messageInvalid="This field is required." isInvalid/>

required

Marks the input as required.

Type: boolean or undefined

Description: The required property is a boolean that marks the input field as required. It indicates that the input must be filled out before submitting the form.

Username

<Input label="Username" required />

loading

Indicates whether the input is in a loading state.

Type: boolean or undefined

Description: The loading property is a boolean that indicates whether the input element is in a loading state. It is used to show a loading indicator.

<Input loading />

disabled

Disables the input field.

Type: boolean or undefined

Description: The disabled property is a boolean that disables the input field, making it non-interactive.

outlined

filled

underlined

<Input disabled mode="outlined" v-model="value"></Input>
<Input disabled mode="filled" v-model="value"></Input>
<Input disabled mode="underlined" v-model="value"></Input>

help

Additional help text displayed for the input.

Type: string or undefined

Description: The help property provides additional help text that is displayed alongside the input element to assist the user.

<Input help="Enter your username" />

clear

Enables a clear button for the input.

Type: boolean or undefined

Description: The clear property is a boolean that enables a clear button for the input element, allowing the user to clear the input value.

<Input clear />

width

Width of the input layout.

Type: TWidth or undefined

Description: The width property defines the width of the input layout. It can be set to a specific value or a percentage.

<Input width="100px" modelValue="100px"/>
<Input width="300px" modelValue="300px"/>
<Input width="500px" modelValue="500px"/>

height

Height of the input layout.

Type: THeight or undefined

Description: The height property defines the height of the input layout. It can be set to a specific value.

<Input height="40px" modelValue="40px"/>
<Input height="50px" modelValue="50px"/>
<Input height="60px" modelValue="60px"/>

animation

Animation type for transitions within the layout.

Type: "transition-all duration-500" or "transition-none" or string or undefined

Description: The animation property specifies the type of animation for transitions within the layout. It can be set to predefined animation types or custom values.

<Input animation="transition-all duration-0" />
<Input animation="transition-all duration-100" />
<Input animation="transition-all duration-1000" />

classBody

Custom CSS class for the body of the layout.

Type: StyleClass or "mb-6 rounded-md" or undefined

Description: The classBody property allows you to apply custom CSS classes to the body of the input layout.

<Input classBody="custom-body-class" />

class

Custom CSS class for the layout container.

Type: StyleClass or undefined

Description: The class property allows you to apply custom CSS classes to the layout container.

<Input class="custom-container-class" />