Textarea Input

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

string | number | object

default:"undefined"

The value bound to the textarea input field.

string

default:"''"

The label displayed above the textarea input field.

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.

Setup

Foundations

Inputs

Features

Multi-Line Text Input

Custom Labels

Read-Only and Disabled States

Usage

Basic Example

Disabled Input

Read-Only Input

Props

Example Use Cases

Reactive Text Input

Notes

​Features

Multi-Line Text Input

Custom Labels

Read-Only and Disabled States

​Usage

​Basic Example

​Disabled Input

​Read-Only Input

​Props

​Example Use Cases

​Reactive Text Input

​Notes

Features

Usage

Basic Example

Disabled Input

Read-Only Input

Props

Example Use Cases

Reactive Text Input

Notes