Textarea
Multi-line text input for longer content like comments or descriptions.
Default
Base
| Class | Description |
|---|
.ui-textarea | Base class |
Size
| Class | Value |
|---|
.ui-textarea--sm | sm |
.ui-textarea--lg | lg |
Variant
| Class | Value |
|---|
.ui-textarea--filled | filled |
.ui-textarea--ghost | ghost |
State
| Class | Value |
|---|
.ui-textarea--error | error |
.ui-textarea--success | success |
Resize
| Class | Value |
|---|
.ui-textarea--resize-none | resize-none |
.ui-textarea--resize-horizontal | resize-horizontal |
.ui-textarea--resize-both | resize-both |
Auto-size
| Class | Description |
|---|
.ui-textarea--auto-size | auto-size |
Override these CSS custom properties to customize the component.
| Token | Default | Description |
|---|
--ui-textarea-min-height |
calc(var(--ui-row) * 4) |
Minimum height |
--ui-textarea-padding-x |
var(--ui-space-1) |
Horizontal padding |
--ui-textarea-padding-y |
var(--ui-space-1) |
Vertical padding |
--ui-textarea-font-size |
var(--ui-font-size-sm) |
Font size |
--ui-textarea-radius |
var(--ui-radius-md) |
Corner radius |
--ui-textarea-bg |
var(--ui-color-bg) |
Background color |
--ui-textarea-border-color |
var(--ui-color-border-strong) |
Border color |
--ui-textarea-border-color-focus |
var(--ui-color-primary) |
Border color focus |
--ui-textarea-color |
var(--ui-color-text) |
Text color |
--ui-textarea-placeholder |
var(--ui-color-text-muted) |
Placeholder |
--ui-textarea-min-height-sm |
calc(var(--ui-row) * 3) |
Minimum height at small size |
--ui-textarea-font-size-sm |
var(--ui-font-size-xs) |
Font size at small size |
--ui-textarea-min-height-lg |
calc(var(--ui-row) * 6) |
Minimum height at large size |
--ui-textarea-padding-x-lg |
var(--ui-space-2) |
Horizontal padding at large size |
--ui-textarea-padding-y-lg |
var(--ui-space-2) |
Vertical padding at large size |
--ui-textarea-font-size-lg |
var(--ui-font-size-md) |
Font size at large size |
--ui-textarea-filled-bg |
var(--ui-color-bg-muted) |
Filled bg |
--ui-textarea-error-border |
var(--ui-color-danger) |
Error border |
--ui-textarea-success-border |
var(--ui-color-success) |
Success border |
Sizes
<textarea class="ui-textarea ui-textarea--sm" placeholder="Small (3 rows)"></textarea>
<textarea class="ui-textarea" placeholder="Default (4 rows)"></textarea>
<textarea class="ui-textarea ui-textarea--lg" placeholder="Large (6 rows)"></textarea>
Variants
<textarea class="ui-textarea" placeholder="Outline (default)"></textarea>
<textarea class="ui-textarea ui-textarea--filled" placeholder="Filled"></textarea>
<textarea class="ui-textarea ui-textarea--ghost" placeholder="Ghost"></textarea>
States
<textarea class="ui-textarea ui-textarea--error">Invalid content</textarea>
<textarea class="ui-textarea ui-textarea--success">Valid content</textarea>
<textarea class="ui-textarea" disabled placeholder="Disabled"></textarea>
<textarea class="ui-textarea" readonly>Read only content</textarea>
Resize Options
<!-- Control how users can resize the textarea. -->
<textarea class="ui-textarea" placeholder="Vertical resize (default)"></textarea>
<textarea class="ui-textarea ui-textarea--resize-none" placeholder="No resize"></textarea>
<textarea class="ui-textarea ui-textarea--resize-horizontal" placeholder="Horizontal resize only"></textarea>
<textarea class="ui-textarea ui-textarea--resize-both" placeholder="Resize both directions"></textarea>
Auto Size
<!-- Automatically grows to fit content using field-sizing: content. Falls back to fixed min-height in unsupported browsers. -->
<textarea class="ui-textarea ui-textarea--auto-size" placeholder="Type to grow..."></textarea>
<textarea class="ui-textarea ui-textarea--auto-size ui-textarea--sm" placeholder="Small auto-size"></textarea>
<textarea class="ui-textarea ui-textarea--auto-size ui-textarea--lg" placeholder="Large auto-size"></textarea>