Textarea
Multi-line text input with auto-resize, character counter, validation, and semantic variants.
01 Examples
Auto-resizing notes field
Character-limited composer
Helper & error
02 Customization
Feedback Form
No feedback yet
Code Input
Fully Custom (unstyled)
03 Accessibility
Labels & Descriptions
The label prop creates an associated <label> element linked via for/id.
Helper and error text are linked via aria-describedby, and errors set aria-invalid.
Character Counter
The character counter uses aria-live="polite" to announce remaining characters to
screen readers. Color changes at warning/over thresholds are paired with text for non-color-dependent
feedback.
Keyboard
Standard textarea keyboard behavior. Focus rings use focus-visible: for keyboard-only visibility. Auto-resize
does not interfere with keyboard interaction or scroll position.
Reduced Motion
Mint effects respect prefers-reduced-motion. The
auto-resize height adjustment is instantaneous and does not animate.
04 API Reference
No matching properties |