FormTextarea Component

The FormTextarea component is built with Vue 3 and provides a customizable textarea input with support for different sizes. It's designed to be simple to use and perfect for multi-line text input.

Basic Usage

Import and use FormTextarea in your Vue components as follows:

<template>
  <FormTextarea v-model="textarea1" placeholder="Enter your message..." />
</template>

<script setup>
import { FormTextarea } from '@robuust-digital/vue-components/core';
</script>

Props

The FormTextarea component accepts the following props:

Prop	Type	Default	Description
modelValue	String	undefined	The textarea value
size	String	'base'	Textarea size variant ('sm' or 'base')

Examples

Small Size Variant

Show code

<template>
  <FormTextarea 
    v-model="textarea2" 
    size="sm" 
    placeholder="Small textarea..."
  />
</template>

Pre-filled Content

This is a pre-filled textarea

Show code

<template>
  <FormTextarea v-model="textarea3" />
</template>

<script setup>
const textarea3 = ref('This is a pre-filled textarea');
</script>

Refs

The FormTextarea component's native HTML <textarea> element can be accessed using a template ref combined with a ref. This allows you to call native textarea methods or set properties directly:

<template>
  <FormTextarea ref="textareaRef" />
</template>

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

const textareaRef = ref();

onMounted(() => {
  // Access the native textarea element
  const nativeTextarea = textareaRef.value.$refs.textarea.$el;
  
  // Now you can use native textarea properties and methods
  nativeTextarea.focus(); // Focus the textarea
});
</script>

CSS Customization ⚡️

To customize the textarea styles global

:root {
  /* Available variables */
  --rvc-textarea-border-radius: var(--rvc-base-border-radius);
  --rvc-textarea-border-width: var(--rvc-base-border-width);
  --rvc-textarea-border-color: var(--rvc-base-border-color);
  --rvc-textarea-font-size: var(--rvc-base-input-font-size);
  --rvc-textarea-font-weight: var(--rvc-base-input-font-weight);
  --rvc-textarea-box-shadow: var(--rvc-base-box-shadow);
  --rvc-textarea-color: var(--rvc-base-input-color);
  --rvc-textarea-bg-color: var(--rvc-base-input-bg-color);
  --rvc-textarea-bg-color-disabled: var(--rvc-base-input-bg-color-disabled);
  --rvc-textarea-disabled-opacity: var(--rvc-base-input-disabled-opacity);
  --rvc-textarea-padding-x: var(--rvc-base-input-padding-x);
  --rvc-textarea-padding-y: calc(var(--spacing) * 1.5);
  --rvc-textarea-height: var(--rvc-base-input-height);
  --rvc-textarea-placeholder-color: var(--rvc-base-input-placeholder-color);

  /* Small variant */
  --rvc-textarea-font-size-sm: calc(var(--rvc-base-input-font-size) * 0.9);
  --rvc-textarea-padding-x-sm: calc(var(--rvc-base-input-padding-x) * 0.85);
  --rvc-textarea-padding-y-sm: calc(var(--spacing) * 1.125);
  --rvc-textarea-height-sm: 1.875rem;
}