Skip to main content
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

Multi-Line Text Input

Provides a textarea element for entering long text.

Custom Labels

Displays a label alongside the input for enhanced user experience.

Read-Only and Disabled States

Offers flexibility to control user interaction.

​
Usage

​
Basic Example

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

<InputTextarea label="Input textarea" />

​
Disabled Input

<InputTextarea label="Input textarea" disabled="disabled" />

​
Read-Only Input

<InputTextarea label="Input textarea" readonly="readonly" />

​
Props

​
v-model
string | number | object
default:"undefined"
The value bound to the textarea input field.
​
label
string
default:"''"
The label displayed above the textarea input field.
​
error
string
default:"null"
Error message to display for validation errors (if any).

​
Example Use Cases

​
Reactive Text Input

Bind the textarea value reactively using v-model: 
<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.