Vitral 0.2
Form

Textarea

A multi-line text box on the same field chrome as InputText, that can grow with its content.

WAI-ARIA tested

Import

main.ts
import { Textarea } from '@vitral/vue';

Basic

0 / 280
<script setup lang="ts">import { Label, StackPanel, Textarea } from '@vitral/vue';import { ref } from 'vue'; const notes = ref('');</script> <template>    <StackPanel spacing="0.375rem" style="min-width: 16rem">        <Label for="ta-notes">Notes</Label>        <Textarea id="ta-notes" v-model="notes" placeholder="Write something…" aria-describedby="ta-notes-hint" maxlength="280" />        <small id="ta-notes-hint" style="color: var(--vt-text-muted-color)">{{ notes.length }} / 280</small>    </StackPanel></template>

Auto resize

No scrollbar and no handle: the height follows the text.

<script setup lang="ts">import { Label, StackPanel, Textarea } from '@vitral/vue';import { ref } from 'vue'; const letter = ref('Dear reader,\n\nThis box grows as you type, and shrinks again when you delete.');</script> <template>    <StackPanel spacing="0.375rem" style="width: 24rem">        <Label for="ta-letter">Letter</Label>        <Textarea id="ta-letter" v-model="letter" auto-resize :rows="2" fluid />    </StackPanel></template>

Sizes, variants and states

<script setup lang="ts">import { Textarea } from '@vitral/vue';</script> <template>    <Textarea placeholder="Small" size="small" :rows="2" aria-label="Small" />    <Textarea placeholder="Filled" variant="filled" :rows="2" aria-label="Filled" />    <Textarea placeholder="Invalid" invalid :rows="2" aria-label="Invalid" />    <Textarea placeholder="Disabled" disabled :rows="2" aria-label="Disabled" />    <Textarea model-value="Read only" readonly :rows="2" aria-label="Read only" /></template>

Fluid

<script setup lang="ts">import { Textarea } from '@vitral/vue';</script> <template>    <Textarea placeholder="Fills its container" fluid aria-label="Fluid" /></template>

API

Read from packages/vue/src/components/Textarea/types.ts, so it says what the component actually accepts.

Props

NameTypeDescription
sizeSize—
variantInputVariantDefaults to the plugin's `inputVariant`.
invalidboolean—
disabledboolean—
readonlyboolean—
fluidboolean—
autoResizebooleanGrows with its content instead of scrolling, and drops the resize handle.
rowsnumberVisible lines of text; with `autoResize`, the height it starts from and never shrinks below.
resize'vertical' | 'horizontal' | 'both' | 'none'Which way the reader may drag the grip. Defaults to the theme's, which is `vertical`: a field that fills its container has nowhere to go sideways. `both` suits one with a width of its own. `autoResize` takes the grip away entirely, since the box is already deciding its own height.

Plus pt, dt and unstyled from BaseProps, see pass-through and unstyled mode.

Used in these templates