Inputs
Textarea
Multi-line input with a resize handle and helper or error text.
Examples
Visible to the whole team.
States
Rendered states (visual reference; the live example above is the accessible one) | Default | Hover | Focus visible | Pressed | Disabled |
|---|
| Multi-line | | | | | |
|---|
Anatomy
Textarea anatomy| # | Part | Description | Presence |
|---|
| 1 | Label | Manrope Bold 14px | Required |
|---|
| 2 | Field | 16 / 12px padding, radius 18px | Required |
|---|
| 3 | Resize handle | Bottom-right, vertical only | Optional |
|---|
| 4 | Counter | Optional, announced politely | Optional |
|---|
Specifications
| Label | Manrope Bold 14px |
|---|
| Internal padding | 16px / 12px |
|---|
| Extras | Drag handle · helper or error line |
|---|
Interaction
Keyboard| Key | Result |
|---|
| Tab | Moves focus in and out; Tab is not captured |
|---|
| Enter | New line |
|---|
| Ctrl/Cmd+Enter | Optional: submits |
|---|
Pointer and touch| Trigger | Response |
|---|
| Drag handle | Resizes vertically |
|---|
| Focus | Indigo border and glow |
|---|
Accessibility
role · textbox (multiline)
1.3.1Info and Relationships1.4.10Reflow3.3.2Labels or Instructions4.1.2Name, Role, Value
Requirements| Requirement | How Rig meets it |
|---|
| Label | Real <label for> |
|---|
| Limits | State the maximum in helper text; announce the counter with aria-live="polite" at thresholds only |
|---|
| Resize | Keep it resizable so users with zoom can see all the text |
|---|
Read the matching WAI pattern ↗
Usage
Do and don’t| Do | Don’t |
|---|
| ✓Show the limit before the user reaches it | ✕Do not block pasting |
| ✓ | ✕Do not use a fixed height that hides text |