Textarea
Textarea is a form element for entering multiple lines of text. Used for comments, descriptions, messages, and other long-form input.
Playground
<Textarea placeholder="Type your message..." />Variants
Sizes
Textarea height is controlled by the rows attribute. The size property only adjusts padding and font size.
compactstandard| Size | Padding | Font | Usage | Preview |
|---|---|---|---|---|
compact | 8px 12px | 14px | For tight spaces | |
standard | 12px 16px | 16px | Standard (Recommended) |
Features
Resize
noneNo resize — for fixed-height layouts
verticalVertical only — the most common option
horizontalHorizontal only — for special cases
bothBoth directions — when full flexibility is needed
States
0/500
This field is required
Focus States
focusRing: false (default): Border change only on click, focus ring auto-shown on keyboard Tab. focusRing: true: Always show focus ring.
API
Props
variant"default""default" | "filled"Textarea visual style
size"default""compact" | "default"Padding and font size (compact: for tight spaces)
radius"default""none" | "sm" | "base" | "default" | "lg" | "xl" | "2xl" | "3xl" | "full"Border radius size (6px)
resize"vertical""none" | "vertical" | "horizontal" | "both"Resize direction
rows4numberNumber of visible rows
focusRingfalsebooleanShow custom focus ring. Keyboard-only focus ring shown even when false
errorundefinedbooleanError state (red border)
disabledundefinedbooleanDisabled state
placeholderundefinedstringPlaceholder text
| Name | Type | Default | Description |
|---|---|---|---|
variant | "default" | "filled" | "default" | Textarea visual style |
size | "compact" | "default" | "default" | Padding and font size (compact: for tight spaces) |
radius | "none" | "sm" | "base" | "default" | "lg" | "xl" | "2xl" | "3xl" | "full" | "default" | Border radius size (6px) |
resize | "none" | "vertical" | "horizontal" | "both" | "vertical" | Resize direction |
rows | number | 4 | Number of visible rows |
focusRing | boolean | false | Show custom focus ring. Keyboard-only focus ring shown even when false |
error | boolean | undefined | Error state (red border) |
disabled | boolean | undefined | Disabled state |
placeholder | string | undefined | Placeholder text |
Field
errorfalsebooleanError state. Auto-propagates to Field.Error and Textarea
disabledfalsebooleanDisabled state. Auto-propagates to Field.Label and Textarea
gap"default""none" | "xs" | "sm" | "default" | "lg"Gap between child elements (0 / 4 / 6 / 8 / 12px)
| Name | Type | Default | Description |
|---|---|---|---|
error | boolean | false | Error state. Auto-propagates to Field.Error and Textarea |
disabled | boolean | false | Disabled state. Auto-propagates to Field.Label and Textarea |
gap | "none" | "xs" | "sm" | "default" | "lg" | "default" | Gap between child elements (0 / 4 / 6 / 8 / 12px) |
Field.Label
requiredfalsebooleanShow required mark (*) at end of label
| Name | Type | Default | Description |
|---|---|---|---|
required | boolean | false | Show required mark (*) at end of label |
Anatomy
The more detail you provide,
the faster we can respond.
Best Practices
Do
- ✓Set initial height with appropriate rows attribute
- ✓Show counter when character limit exists
- ✓Set resize="none" when resize is not needed
- ✓Show input examples in placeholder
Don't
- ✗Don't use Textarea for short text (use Input)
- ✗Don't set extremely small rows
- ✗Don't truncate without disclosing character limits upfront
- ✗Don't use without a label
Accessibility
Keyboard
WCAG 2.2 Compliance
- Focus indicator
- aria-invalid (on error)
- aria-describedby support
- Contrast ratio 4.5:1 or higher