Multi-line text input with support for auto-resize, character counting, and validation states.
Enable autoResize to automatically grow and shrink the textarea based on content. Use minRows and maxRows to constrain the resize behavior.
Show a character counter by setting maxLength and showCounter. The counter turns orange when near the limit and red when exceeded.
Without autoResize, the textarea maintains a fixed height based on the rows prop.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | - | Label text |
status | 'default' | 'success' | 'error' | 'pending' | 'default' | Validation state |
helperText | string | - | Helper/error text |
required | boolean | false | Show required indicator |
autoResize | boolean | false | Auto-resize based on content |
minRows | number | 3 | Minimum rows (with autoResize) |
maxRows | number | 10 | Maximum rows (with autoResize) |
showCounter | boolean | false | Show character counter (requires maxLength) |
maxLength | number | - | Maximum character limit |
renderCounter | (current, max) => ReactNode | - | Custom counter renderer |
Also accepts all standard HTML textarea attributes (value, onChange, placeholder, disabled, rows, etc.)