Textarea
Multi-line text input with support for auto-resize, character counting, and validation states.
Textarea States
Default
Success
Error
Disabled
Basic Usage
Provide a detailed description
<Textarea
label="Description"
placeholder="Enter a description..."
helperText="Provide a detailed description"
rows={4}
/>Auto-Resize
Enable autoResize to automatically grow and shrink the textarea based on content. Use minRows and maxRows to constrain the resize behavior.
Expands from 2 rows to max 8 rows based on content
<Textarea
value={description}
onChange={(e) => setDescription(e.target.value)}
label="Auto-Resize Textarea"
placeholder="Start typing to see it grow..."
autoResize
minRows={2}
maxRows={8}
/>Character Counter
Show a character counter by setting maxLength and showCounter. The counter turns orange when near the limit and red when exceeded.
<Textarea
value={bio}
onChange={(e) => setBio(e.target.value)}
label="Bio"
placeholder="Tell us about yourself..."
maxLength={200}
showCounter
autoResize
minRows={3}
maxRows={6}
/>Custom Counter Renderer
<Textarea
label="Tweet"
placeholder="What's happening?"
maxLength={280}
showCounter
renderCounter={(current, max) => (
<span style={{
color: current > max ? 'var(--alias-text-error)' :
current > max * 0.9 ? 'var(--color-amber-500)' :
'var(--alias-text-tertiary)'
}}>
{max - current} characters remaining
</span>
)}
autoResize
/>Validation States
Thank you for your feedback
Comment is required
Validating content
// Success state
<Textarea
label="Feedback"
value="Great product!"
status="success"
helperText="Thank you for your feedback"
/>
// Error state
<Textarea
label="Comment"
status="error"
helperText="Comment is required"
required
/>
// Pending state (validating)
<Textarea
label="Message"
status="pending"
helperText="Validating content"
/>Fixed Height
Without autoResize, the textarea maintains a fixed height based on the rows prop.
Fixed 5-row height with scrolling
Props Reference
Also accepts all standard HTML textarea attributes (value, onChange, placeholder, disabled, rows, etc.)