Vue Component Library

Appearance

TextArea Component Demo ​

This page demonstrates the TextArea component with various configurations and examples.

Basic TextArea ​

A simple textarea with a label.

vue
<template>
  <OTextArea
    label="Comments"
    placeholder="Enter your comments"
    :rows="3"
  />
</template>

TextArea with Character Counter ​

TextArea with a character counter.

vue
<template>
  <OTextArea
    label="Feedback"
    placeholder="Enter your feedback"
    :rows="4"
    :counter="true"
    :maxlength="200"
  />
</template>
0 / 200

Auto-Growing TextArea ​

TextArea that automatically grows as content is added.

vue
<template>
  <OTextArea
    label="Description"
    placeholder="Enter a description"
    :rows="2"
    :autoGrow="true"
    :counter="true"
  />
</template>
0

Non-Resizable TextArea ​

TextArea with manual resizing disabled.

vue
<template>
  <OTextArea
    label="Fixed Size"
    placeholder="This textarea cannot be resized"
    :rows="3"
    :noResize="true"
  />
</template>

TextArea with Validation ​

TextArea with validation rules.

vue
<template>
  <OTextArea
    label="Bio"
    placeholder="Enter your bio"
    :rows="4"
    :rules="[
      { rule: 'required', message: 'Bio is required' },
      { rule: 'min', value: 10, message: 'Bio must be at least 10 characters' }
    ]"
  />
</template>

Disabled and Readonly TextAreas ​

TextAreas in disabled and readonly states.

vue
<template>
  <div class="textarea-group">
    <OTextArea
      label="Disabled TextArea"
      placeholder="This textarea is disabled"
      :disabled="true"
      value="This is a disabled textarea that cannot be edited."
      :rows="3"
    />
    
    <OTextArea
      label="Readonly TextArea"
      placeholder="This textarea is readonly"
      :readonly="true"
      value="This is a readonly textarea that cannot be edited but can be focused and selected."
      :rows="3"
    />
  </div>
</template>

<style>
.textarea-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>

TextArea with Hint ​

TextArea with a hint message.

vue
<template>
  <OTextArea
    label="Message"
    placeholder="Enter your message"
    hint="Please keep your message concise and relevant"
    :persistentHint="true"
    :rows="4"
  />
</template>
Please keep your message concise and relevant

TextArea with Prepend and Append ​

TextArea with prepend and append elements.

vue
<template>
  <OTextArea
    label="Formatted Text"
    placeholder="Enter your text"
    :rows="4"
    :prepend="true"
    :append="true"
    :prependInner="true"
    :appendInner="true"
  >
    <template #prepend>
      <div style="padding: 0 8px;">📝</div>
    </template>
    <template #prependInner>
      <div style="padding: 0 8px;">✏️</div>
    </template>
    <template #appendInner>
      <div style="padding: 0 8px;">🔍</div>
    </template>
    <template #append>
      <div style="padding: 0 8px;">📋</div>
    </template>
  </OTextArea>
</template>
📝
📋

Clearable TextArea ​

TextArea with a clear button.

vue
<template>
  <OTextArea
    label="Notes"
    placeholder="Enter your notes"
    :rows="4"
    :clearable="true"
  />
</template>

Form Example with TextArea ​

A form that includes a TextArea component.

vue
<template>
  <form class="form-example" @submit.prevent="submitForm">
    <OInput
      v-model="form.name"
      label="Name"
      placeholder="Enter your name"
      :rules="[{ rule: 'required', message: 'Name is required' }]"
    />
    
    <OInput
      v-model="form.email"
      label="Email"
      placeholder="Enter your email"
      type="email"
      :rules="[
        { rule: 'required', message: 'Email is required' },
        { rule: 'email', message: 'Please enter a valid email' }
      ]"
    />
    
    <OTextArea
      v-model="form.message"
      label="Message"
      placeholder="Enter your message"
      :rows="5"
      :counter="true"
      :maxlength="500"
      :rules="[
        { rule: 'required', message: 'Message is required' },
        { rule: 'min', value: 10, message: 'Message must be at least 10 characters' }
      ]"
    />
    
    <button type="submit" class="submit-button">Submit</button>
  </form>
</template>

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

const form = ref({
  name: '',
  email: '',
  message: ''
})

const submitForm = () => {
  console.log('Form submitted:', form.value)
}
</script>

<style>
.form-example {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 500px;
  margin: 0 auto;
}

.submit-button {
  margin-top: 16px;
  padding: 12px 24px;
  background-color: #4a90e2;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.submit-button:hover {
  background-color: #3a80d2;
}
</style>
0 / 500