Components / Forms

Textarea

A native multi-line text field with optional resize control.

Preview

Install

Run in your project

npx @getweini/cli@latest add textarea

Use cases

Support request

Collect a longer message while retaining native length constraints.

Resizing notes

Let authors enlarge a draft vertically without disturbing page width.

Usage example

Vue

<script setup lang="ts">
import { ref } from 'vue'
import Textarea from './components/ui/textarea/Textarea.vue'
import Label from './components/ui/label/Label.vue'
const note = ref('')
</script>

<template>
  <Label for="note">Note</Label>
  <Textarea id="note" v-model="note" :maxlength="240" resize="vertical" />
</template>

More examples

Support message

Use help text for the character limit.

Support message

<script setup lang="ts">
import { ref } from 'vue'
import Textarea from './components/ui/textarea/Textarea.vue'
const message = ref('')
</script>
<template>
  <label for="message">Message</label>
  <Textarea id="message" v-model="message" name="message" :maxlength="1000" required aria-describedby="message-help" />
  <p id="message-help">Up to 1,000 characters.</p>
</template>

Private notes

Choose the resize behavior without replacing native textarea semantics.

Private notes

<script setup lang="ts">
import { ref } from 'vue'
import Textarea from './components/ui/textarea/Textarea.vue'
const notes = ref('')
</script>
<template>
  <label for="notes">Private notes</label>
  <Textarea id="notes" v-model="notes" name="notes" :rows="6" resize="vertical" />
</template>

Key API

The most useful props, models, slots, events, and methods for this component.

Key API for Textarea
Name	Type	Default or requirement
`v-model`	string	undefined
`size`	sm \| md \| lg	md
`resize`	none \| vertical \| both	vertical
`invalid`	boolean	false

Native rows, maxlength, required, name, form, and ARIA attributes pass through.

Implementation notes

rows, minlength, maxlength, readonly, and name pass to the native textarea.
Reset a controlled form by restoring the parent model.

Accessibility and localization

Connect help and error text with aria-describedby; invalid styling alone does not explain the error.