Textarea
The e-textarea component is built for multi-line input with the same field system used by other form controls. It supports visual variants, prefix/suffix tokens, icons, validation, and helper messaging.
Use this page to choose the right structure for comments, descriptions, and long-form input while preserving clarity, consistency, and predictable submission behavior.
Usage
Use this baseline playground to configure Textarea in context: color, outlined, clearable, readonly, disabled, retain-color, rows, and counter/limit from a single control panel.
Visual variants
Compare filled and outlined variants across interactive, readonly, and disabled states to define hierarchy and readability in dense form layouts.
Rows and length
Control vertical footprint with rows and add guardrails with limit + counter for long-form input quality.
Icons and affixes
Use icon and affix props such as prependIcon, appendInnerIcon, prefix, and suffix to reinforce intent and scanning without adding extra fields.
Named slots
Compose richer multiline fields with slots like prepend and append-inner to add context and quick actions in place.
Validation
Apply rule-based validation and submit-state gating so long-form input stays actionable and errors remain visible before submission.
Feedback form
Complete required fields to continue
Props
Use the API table as source of truth for supported props, accepted types, defaults, and inherited field behavior.
| Property | Type | Default |
|---|---|---|
| modelValue | string | number | null | undefined |
Current textarea value. Supports controlled usage with v-model. | ||
| name | string | undefined |
Native textarea name attribute used in form submissions. | ||
| placeholder | string | undefined |
Placeholder shown when there is no value and label behavior allows it. | ||
| rows | string | number | 3 |
Initial visible row count for the textarea input area. | ||
| prefix | string | undefined |
Text rendered before the textarea input region. | ||
| suffix | string | undefined |
Text rendered after the textarea input region. | ||
| autocomplete | string | undefined |
Native autocomplete attribute for browser autofill behavior. | ||
| inputReadonly | boolean | false |
Applies readonly directly to the native textarea element. | ||
| iconClear | string | IconPath | IconPath[] | undefined |
Overrides icon used by the clear action button. | ||
| limit | string | number | undefined |
Maximum number of characters allowed in textarea input. | ||
| counter | boolean | false |
Displays character counter in details section. | ||
| spellcheck | boolean | false |
Enables browser spell checking for textarea content. | ||
| autocapitalize | string | undefined |
Controls automatic capitalization behavior on supported devices. | ||
| enterkeyhint | TextInputEnterKeyHint | undefined |
Hints the Enter key action label on virtual keyboards. | ||
| modelModifiers | TextInputModelModifiers | {} |
v-model modifiers map (trim, number, lazy) applied by input logic. | ||
| clearable | boolean | false |
Shows clear action when a value exists. | ||
| color | string | "primary" |
Base theme color applied to field state and interactions. | ||
| outlined | boolean | false |
Uses outlined visual variant for the field container. | ||
| disabled | boolean | false |
Disables interaction and prevents value updates. | ||
| readonly | boolean | false |
Prevents editing while preserving focus behavior. | ||
| dense | boolean | false |
Applies denser vertical spacing inherited from Field. | ||
| retainColor | boolean | false |
Keeps active color styling after focus/interaction. | ||
| label | string | number | undefined |
Field label text. | ||
| labelMinWidth | string | number | undefined |
Minimum width reserved for label region. | ||
| labelBehavior | "static" | "floating" | "inline" | "static" |
Label behavior strategy for static/floating/inline presentation. | ||
| inputAlign | left | right | center | start | end | "start" |
Horizontal text alignment inside input/selection area. | ||
| prependIcon | string | IconPath | IconPath[] | undefined |
Icon rendered in outer-left affix region. | ||
| prependInnerIcon | string | IconPath | IconPath[] | undefined |
Icon rendered before content inside input frame. | ||
| appendInnerIcon | string | IconPath | IconPath[] | undefined |
Icon rendered after content inside input frame. | ||
| appendIcon | string | IconPath | IconPath[] | undefined |
Icon rendered in outer-right affix region. | ||
| detail | string | undefined |
Helper text shown in details area when no errors are present. | ||
| detailsOnMessageOnly | boolean | false |
Shows details area only when messages/errors exist. | ||
| rules | FieldRule | undefined |
Validation rules evaluated against modelValue. | ||
| detailErrors | string[] | undefined |
Explicit error messages rendered in details area. | ||