> ## 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.

# Textarea Input

> InputTextarea.vue Component Documentation

The `InputTextarea.vue` component is a reusable Vue.js component for multi-line text input. It supports features such as two-way data binding with `v-model`, customizable labels, and read-only or disabled states.

***

## Features

<CardGroup cols={2}>
  <Card title="Multi-Line Text Input" icon="square-1">
    Provides a <code>textarea</code> element for entering long text.
  </Card>

  <Card title="Custom Labels" icon="square-2">
    Displays a label alongside the input for enhanced user experience.
  </Card>

  <Card title="Read-Only and Disabled States" icon="square-3">
    Offers flexibility to control user interaction.
  </Card>
</CardGroup>

***

## Usage

### Basic Example

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

```vue theme={null}
<InputTextarea label="Input textarea" />
```

### Disabled Input

```vue theme={null}
<InputTextarea label="Input textarea" disabled="disabled" />
```

### Read-Only Input

```vue theme={null}
<InputTextarea label="Input textarea" readonly="readonly" />
```

***

## Props

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

<ParamField path="label" type="string" default="''">
  The label displayed above the textarea input field.
</ParamField>

<ParamField path="error" type="string" default="null">
  Error message to display for validation errors (if any).
</ParamField>

***

## Example Use Cases

### Reactive Text Input

Bind the textarea value reactively using `v-model`:

```vue theme={null}
<template>
  <InputTextarea v-model="userDescription" label="Description" />
</template>

<script setup>
import { ref } from 'vue';

const userDescription = ref('');
</script>
```

***

## Notes

* The `v-model` prop provides seamless integration for managing the textarea's value reactively.
* The `label` prop enhances usability by providing context for the input field.
* The `error` prop can be used to highlight validation issues, visually marking the input as erroneous.

For further customization, refer to the component's source code.