Textarea
Multi-line text input that can grow with its content, with a size scale, autofill extension control, and invalid state styling.
import { Textarea } from "@plexui/vue/components/Textarea";Examples
Overview
Variants
variant
Auto resize
rows
maxRows
Sizing
size
gutterSize
Disabled
Invalid
Auto select text
Autofill extensions
API
| Prop | Type | Default | Description |
|---|---|---|---|
value / v-model:value | string | number | — | Controlled value; uncontrolled when omitted |
default-value | string | number | — | Initial value when uncontrolled |
variant | "outline" | "soft" | "outline" | Visual style of the textarea |
size | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "md" | Control height for single-line equivalent |
gutter-size | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | — | Horizontal padding; defaults from size |
disabled | boolean | false | Disable the textarea |
read-only | boolean | false | Make the textarea read-only (the native readonly attribute works too) |
invalid | boolean | false | Mark as invalid |
allow-autofill-extensions | boolean | !!name | Allow autofill extensions |
auto-select | boolean | false | Select all contents when mounted |
rows | number | 3 | Initial row count |
auto-resize | boolean | false | Grow/shrink with content |
max-rows | number | — | Max rows when auto-resize; defaults to the larger of rows and 10 |
class | string | — | Applied to the container <div> |
@update:value | (value: string) => void | — | Emitted on every input |
@autofill | () => void | — | Emitted when the browser autofills the textarea |
Every other attribute and listener (placeholder, name, id, style, @input, @focus, @blur, ...) goes to the <textarea>.
Styling
Textarea reads these component tokens. Override them at any scope to restyle it:
--input-border-color-invalid: border color invalid (defaultvar(--color-border-danger-outline))--input-outline-border-color: outline border color (defaultvar(--color-border-primary-outline))--input-outline-border-color-focus: outline border color focus (defaultvar(--alpha-50))--input-outline-border-color-hover: outline border color hover (defaultlight-dark(var(--alpha-25), var(--alpha-30)))--input-placeholder-text-color: placeholder text color (defaultvar(--color-text-tertiary))--input-soft-background-color: soft background color (defaultvar(--color-background-primary-soft-alpha))--input-soft-border-color-focus: soft border color focus (defaultvar(--alpha-20))