Skip to main content
The InputText.vue component is a versatile and customizable input field for Vue applications. It supports features like dynamic width, validation errors, read-only and disabled states, and customizable icons via slots.

​
Features

Customizable Width

Allows flexible adjustment of the input width.

Validation Error Handling

Supports displaying validation errors to guide users.

Disabled and Read-Only States

Manages disabled and read-only states for better control.

Left and Right Icon Slots

Provides slots for custom icons on the left and right of the input field.

​
Props

​
v-model
string | number | object
default:"undefined"
The value bound to the date input field.
​
width
number | string
default:"100"
Sets the width of the input as a percentage.
​
error
string
default:"null"
Displays an error message and applies error styling when provided.
​
label
string
default:"null"
Label for the input field. Supports placeholder-like styling for enhanced accessibility.
​
datalist
array
default:"null"
Add a datalist for permissible or recommended options available to choose from within the input field.

​
Events

​
enter
event
Triggered when the user presses the Enter key while focused on the input.
​
blur
event
Triggered when the input loses focus, passing the input’s value as an argument. emit(value: string)

​
Slots

​
iconLeft
slot
Slot for placing an icon to the left of the input. <template #iconLeft></template>
​
iconRight
slot
Slot for placing an icon to the right of the input. <template #iconRight></template>

​
Usage

​
Basic Input

import { InputText } from '@robojuice/velure-ui';

<InputText name="email" label="Email" v-model="email" />

​
Input with Error

<InputText name="email" label="Email" error="This field is required" v-model="email" />

​
Disabled Input

<InputText name="email" label="Email" disabled v-model="email" />

​
Read-Only Input

<InputText name="email" label="Email" readonly v-model="email" />

​
Datalist Input

import { InputText } from '@robojuice/velure-ui';

<InputText :datalist="['sm', 'md', 'lg', 'xl']" name="size" label="Size" v-model="size" />

​
Input with Icons

​
Left Icon

<InputText name="email" label="Email" v-model="email">
  <template #iconLeft>
    <IconDownload size="20" />
  </template>
</InputText>

​
Right Icon

<InputText name="email" label="Email" v-model="email">
  <template #iconRight>
    <IconDownload size="20" />
  </template>
</InputText>

​
Both Left and Right Icons

<InputText name="email" label="Email" v-model="email">
  <template #iconLeft>
    <IconDownload size="20" />
  </template>
  <template #iconRight>
    <IconDownload size="20" />
  </template>
</InputText>

​
Advanced Features

​
Dynamic Width

The width prop allows you to adjust the input’s width dynamically: 
<InputText name="email" label="Email" :width="50" v-model="email" />

​
Handling Enter Key

Listen for the enter event to perform actions when the Enter key is pressed: 
<InputText name="email" label="Email" v-model="email" @enter="handleEnter" />

​
Handling Blur Event

Use the blur event to capture the input’s value when it loses focus: 
<InputText name="email" label="Email" v-model="email" @blur="handleBlur" />

​
Notes

  • Error Handling: The error prop automatically styles the input and provides visual feedback for validation errors.
  • Accessibility: Labels are styled with placeholder-like effects but remain fully accessible for screen readers.
  • Icon Integration: Icons can be easily integrated on either side of the input field using the iconLeft and iconRight slots.
  • Dynamic Styling: The component supports external class and style attributes for additional customization.