> ## Documentation Index
> Fetch the complete documentation index at: https://docs.velure.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Text Input

> InputText.vue Component Documentation

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

<CardGroup cols={2}>
  <Card title="Customizable Width" icon="square-1">
    Allows flexible adjustment of the input width.
  </Card>

  <Card title="Validation Error Handling" icon="square-2">
    Supports displaying validation errors to guide users.
  </Card>

  <Card title="Disabled and Read-Only States" icon="square-3">
    Manages disabled and read-only states for better control.
  </Card>

  <Card title="Left and Right Icon Slots" icon="square-4">
    Provides slots for custom icons on the left and right of the input field.
  </Card>
</CardGroup>

***

## Props

<ParamField path="v-model" type="string | number | object" default="undefined">
  The value bound to the date input field.
</ParamField>

<ParamField path="width" type="number | string" default="100">
  Sets the width of the input as a percentage.
</ParamField>

<ParamField path="error" type="string" default="null">
  Displays an error message and applies error styling when provided.
</ParamField>

<ParamField path="label" type="string" default="null">
  Label for the input field. Supports placeholder-like styling for enhanced accessibility.
</ParamField>

<ParamField path="datalist" type="array" default="null">
  Add a [datalist](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist) for permissible or recommended options available to choose from within the input field.
</ParamField>

***

## Events

<ParamField path="enter" type="event">
  Triggered when the user presses the Enter key while focused on the input.
</ParamField>

<ParamField path="blur" type="event">
  Triggered when the input loses focus, passing the input's value as an argument. `emit(value: string)`
</ParamField>

***

## Slots

<ParamField path="iconLeft" type="slot">
  Slot for placing an icon to the left of the input. `<template #iconLeft></template>`
</ParamField>

<ParamField path="iconRight" type="slot">
  Slot for placing an icon to the right of the input. `<template #iconRight></template>`
</ParamField>

***

## Usage

### Basic Input

```js theme={null}
import { InputText } from '@robojuice/velure-ui';
```

```vue theme={null}
<InputText name="email" label="Email" v-model="email" />
```

### Input with Error

```vue theme={null}
<InputText name="email" label="Email" error="This field is required" v-model="email" />
```

### Disabled Input

```vue theme={null}
<InputText name="email" label="Email" disabled v-model="email" />
```

### Read-Only Input

```vue theme={null}
<InputText name="email" label="Email" readonly v-model="email" />
```

### Datalist Input

```js theme={null}
import { InputText } from '@robojuice/velure-ui';
```

```vue theme={null}
<InputText :datalist="['sm', 'md', 'lg', 'xl']" name="size" label="Size" v-model="size" />
```

### Input with Icons

#### Left Icon

```vue theme={null}
<InputText name="email" label="Email" v-model="email">
  <template #iconLeft>
    <IconDownload size="20" />
  </template>
</InputText>
```

#### Right Icon

```vue theme={null}
<InputText name="email" label="Email" v-model="email">
  <template #iconRight>
    <IconDownload size="20" />
  </template>
</InputText>
```

#### Both Left and Right Icons

```vue theme={null}
<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:

```vue theme={null}
<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:

```vue theme={null}
<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:

```vue theme={null}
<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.