Textarea

Auto-growing textarea

Text longer than a line: a message, a note, a description. For one line use Input; for formatted text, Editor.

Basic

Bio

0 / 120

Fixed rows

Required

<script setup lang="ts">
import { ref } from "vue";
import { BlessLabel, BlessTextarea } from "blessing-ui";
const bio = ref("");
</script>

<template>
  <div class="row" style="align-items: flex-start">
    <div class="col">
      <BlessLabel for="d-bio">Bio</BlessLabel>
      <BlessTextarea
        id="d-bio"
        v-model="bio"
        placeholder="A line or two about you"
        :maxlength="120"
        counter
      />
    </div>
    <div class="col">
      <BlessLabel>Fixed rows</BlessLabel>
      <BlessTextarea :rows="4" :autogrow="false" error="Required" aria-label="Fixed rows" />
    </div>
  </div>
</template>

• autogrow (on by default) grows with the text where field-sizing is supported; elsewhere it stays at rows and scrolls.
• counter with maxlength shows n / max. It is read out only when the text is near the limit, not on every keystroke.
• In a form, wrap it in a Field; its own description and error are for a label-less textarea.

Usage

import { BlessTextarea } from "blessing-ui";

API

Props

Name	Type	Default	Description
id	string	—
rows	number	3
autogrow	boolean	true	grow with content (field-sizing: content)
invalid	boolean	—
disabled	boolean	—
readonly	boolean	—
description	string	—
error	string	—
maxlength	number	—
counter	boolean	—	show n / maxlength
modelValue	string	""

Events

Name	Payload	Description
update:modelValue	[value: string]