Text Input

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

string | number | object

default:"undefined"

The value bound to the date input field.

number | string

default:"100"

Sets the width of the input as a percentage.

string

default:"null"

Displays an error message and applies error styling when provided.

string

default:"null"

Label for the input field. Supports placeholder-like styling for enhanced accessibility.

array

default:"null"

Add a datalist for permissible or recommended options available to choose from within the input field.

Events

event

Triggered when the user presses the Enter key while focused on the input.

event

Triggered when the input loses focus, passing the input’s value as an argument. emit(value: string)

Slots

slot

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

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.

Setup

Foundations

Inputs

Features

Customizable Width

Validation Error Handling

Disabled and Read-Only States

Left and Right Icon Slots

Props

Events

Slots

Usage

Basic Input

Input with Error

Disabled Input

Read-Only Input

Datalist Input

Input with Icons

Left Icon

Right Icon

Both Left and Right Icons

Advanced Features

Dynamic Width

Handling Enter Key

Handling Blur Event

Notes

​Features

Customizable Width

Validation Error Handling

Disabled and Read-Only States

Left and Right Icon Slots

​Props

​Events

​Slots

​Usage

​Basic Input

​Input with Error

​Disabled Input

​Read-Only Input

​Datalist Input

​Input with Icons

​Left Icon

​Right Icon

​Both Left and Right Icons

​Advanced Features

​Dynamic Width

​Handling Enter Key

​Handling Blur Event

​Notes

Features

Props

Events

Slots

Usage

Basic Input

Input with Error

Disabled Input

Read-Only Input

Datalist Input

Input with Icons

Left Icon

Right Icon

Both Left and Right Icons

Advanced Features

Dynamic Width

Handling Enter Key

Handling Blur Event

Notes