# Textarea Examples (vue)

```vue
<template>
  <h1>DBTextarea Documentation Examples</h1>
  <h2>1. Default Textarea</h2>
  <DBTextarea label="Default Textarea"></DBTextarea>
  <h2>2. Resizable Variants</h2>
  <DBTextarea resize="none" label="No Resize"></DBTextarea>
  <DBTextarea resize="both" label="Resize Both"></DBTextarea>
  <DBTextarea resize="horizontal" label="Resize Horizontal"></DBTextarea>
  <DBTextarea resize="vertical" label="Resize Vertical"></DBTextarea>
  <h2>3. Rows and Columns</h2>
  <DBTextarea label="Custom Rows and Columns" :rows="5" :cols="30"></DBTextarea>
  <h2>4. Wrap Variants</h2>
  <DBTextarea wrap="hard" label="Hard Wrap"></DBTextarea>
  <DBTextarea wrap="soft" label="Soft Wrap"></DBTextarea>
  <DBTextarea wrap="off" label="No Wrap"></DBTextarea>
  <h2>5. Disabled State</h2>
  <DBTextarea label="Disabled Textarea" :disabled="true"></DBTextarea>
  <h2>6. Placeholder Examples</h2>
  <DBTextarea
    placeholder="Enter text here"
    label="With Placeholder"
  ></DBTextarea>
  <h2>7. Message Property Example</h2>
  <DBTextarea
    label="Textarea with Message"
    message="This is a helper message."
  ></DBTextarea>
  <h2>8. Input Event Example</h2>
  <DBTextarea
    label="Input Event"
    :onInput="(event) => console.log('Input event:', event.target.value)"
  ></DBTextarea>
</template>

<script setup lang="ts">
import { DBTextarea } from "@db-ux/v-v-core-components";
</script>
```