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/ui/components/Textarea";Examples
Overview
Variants
variant
outline
soft
Auto resize
rows
maxRows
Sizing
size
gutterSize
Disabled
Invalid
Auto select text
Autofill extensions
API
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | number | — | Controlled value; uncontrolled when omitted |
defaultValue | string | number | — | Initial value when uncontrolled |
onChange | (event: ChangeEvent<HTMLTextAreaElement>) => void | — | Called on every input |
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 |
gutterSize | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | — | Horizontal padding; defaults from size |
disabled | boolean | false | Disable the textarea |
readOnly | boolean | false | Make the textarea read-only |
invalid | boolean | false | Mark as invalid |
allowAutofillExtensions | boolean | !!name | Allow autofill extensions |
autoSelect | boolean | false | Select all contents when mounted |
rows | number | 3 | Initial row count |
autoResize | boolean | false | Grow/shrink with content |
maxRows | number | — | Max rows when autoResize; defaults to the larger of rows and 10 |
onAutofill | () => void | — | Called when the browser autofills the textarea |
className | string | — | Applied to the container <div> |
ref | Ref<HTMLTextAreaElement> | — | Ref to the <textarea> |
Every other <textarea> attribute (placeholder, name, id, onFocus, onBlur, ...) 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))