Usage

Use TextArea to enter multi-line plain text.

<script setup lang="ts">
import { TextArea } from '@astryx-vue/core/TextArea'
import { shallowRef } from 'vue'

const bio = shallowRef('')
</script>

<template>
  <TextArea v-model="bio" label="Bio" :rows="4" />
</template>

Import the theme once in the application entry:

import '@astryx-vue/themes/neutral.css'

Best practices

Guidance	Practices
Do	Provide a visible label so users know what to enter. If the label must be hidden, set isLabelHidden with a descriptive label for screen readers.
Do	Set maxLength with a character counter when there is a defined limit; it helps users stay within bounds before they submit.
Do	Use the status prop to surface validation feedback inline: show success when input is valid, warning for soft limits, and error for hard failures.
Do	Add a description or placeholder to clarify expected content, like "Describe the issue in detail," but never rely on placeholder alone as the only label.
Don't	Avoid using TextArea for short, single-line values like names or emails; use TextInput instead.
Don't	Don't rely solely on placeholder text to communicate the purpose of the field; placeholders disappear on focus and are not accessible labels.
Don't	Don't show a status message without also setting the status type; the colored border and icon are what draw the user's attention to the message.
Don't	Don't wrap a disabled TextArea in Tooltip to explain why it's disabled; disabled controls swallow the hover events the wrapper needs. Use the disabledMessage prop instead.

Examples

Basic usage

BioRequired

A short introduction.

Ada Lovelace is widely considered the first computer programmer.

For longer text. Label, description, and status are linked through Field.

Sizes

Small

Small size.

Medium

Medium size.

Large

Large size.

Three heights are available: sm, md, and lg. Width is controlled by the width prop.

Rows and length

Reply

Maximum 140 characters.

rows, cols, minlength, and maxlength are forwarded to the native textarea.

Disabled and read-only

Disabled

Unavailable

Read-only

This value is still included in form submission.

This value is read-only.

Locked

Only editors can edit this.

You need the Editor role to edit this field.

Disabled values are not submitted. A disabledMessage keeps the control focusable and explains why.

Validation states

Summary

Summary must be at least 20 characters.

status shows an error, warning, or success message. The message is attached below the field by default.

Async save

Content

Type here to simulate an async save.

changeAction runs after each content change. A loading indicator appears while the action is pending.

Keyboard controls

The control is a real textarea, so it keeps the browser's native key behaviour, and the component only adds handling on top of a few keys. Most keystrokes therefore behave exactly as they do in any other multi-line field:

• Tab moves focus into or out of the text area.
• Shift + Enter inserts a newline at the caret.
• Enter emits the enter event, so your handler can take over submit-like logic.
• Escape closes an open disabled reason tooltip or status tooltip.

When submit-on-Enter behaviour makes sense for your form, implement it in the enter handler.

Usage guidance

The text area does not constrain what users type, so length limits and validation belong to your application:

• When the expected length matters, state minlength and maxlength in the description so users know it before they submit.
• isRequired only shows the required indicator and sets the matching ARIA state; it does not run native validation.
• Whether the content meets your business rules is up to validation in application code.