Textarea
The Textarea component provides a multi-line text input field with support for character counting, validation feedback, and auto-grow functionality.Props
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | - | Field name for form state management |
label | string | - | Textarea label |
placeholder | string | "Enter your message..." | Placeholder text |
value | string | "" | Initial value |
rows | number | 4 | Number of visible rows |
required | boolean | false | Whether field is required |
disabled | boolean | false | Disabled state |
submitLabel | string | "Submit" | Submit button label |
showSubmit | boolean | true | Whether to show submit button |
error | string | - | Error message to display |
helperText | string | - | Helper text below textarea |
maxLength | number | - | Maximum character length |
showCount | boolean | false | Show character count |
radius | string | number | 12 | Border radius: sm, md, lg, xl, or number |
autoGrow | boolean | false | Auto-grow with content |
maxRows | number | 8 | Maximum rows when autoGrow is enabled |
Examples
Basic Textarea
<Textarea placeholder="Enter your message..." />
With Label
<Textarea label="Message" placeholder="Type your message here..." />
Required Field
<Textarea label="Description" required placeholder="Enter description..." />
Custom Rows
<Textarea label="Bio" rows={6} placeholder="Tell us about yourself..." />
With Error State
<Textarea
label="Comments"
value="Too short"
error="Please enter at least 50 characters"
/>
With Helper Text
<Textarea
label="Feedback"
placeholder="Share your thoughts..."
helperText="Your feedback helps us improve"
/>
Character Count
<Textarea
label="Tweet"
placeholder="What's happening?"
maxLength={280}
showCount
/>
Without Submit Button
<Textarea
name="description"
label="Description"
showSubmit={false}
placeholder="Enter description..."
/>
Auto-grow
<Textarea
label="Notes"
placeholder="Start typing..."
autoGrow
rows={2}
maxRows={10}
/>
Custom Radius
<Col gap="md">
<Textarea label="Sharp" radius="sm" placeholder="Sharp corners" />
<Textarea label="Rounded" radius="lg" placeholder="Rounded corners" />
</Col>
Common Patterns
Feedback Form
<Card>
<Col gap="md">
<Title value="Send Feedback" />
<Textarea
name="feedback"
label="Your Feedback"
placeholder="Tell us what you think..."
rows={5}
showSubmit={false}
required
/>
<Button
label="Submit Feedback"
fullWidth
action={{ type: "lyzn.sendMessage" }}
/>
</Col>
</Card>
Comment Box
<Textarea
placeholder="Write a comment..."
submitLabel="Post"
rows={3}
/>
Bio Editor
<Textarea
label="Bio"
placeholder="Write something about yourself..."
maxLength={500}
showCount
helperText="A brief description for your profile"
rows={4}
/>
Message Composer
<Card>
<Col gap="md">
<Input name="subject" label="Subject" showSubmit={false} />
<Textarea
name="body"
label="Message"
placeholder="Write your message..."
rows={8}
showSubmit={false}
/>
<Row gap="md" justify="end">
<Button label="Save Draft" variant="outline" />
<Button
label="Send"
icon="send"
action={{ type: "lyzn.sendMessage" }}
/>
</Row>
</Col>
</Card>
Notes with Auto-grow
<Textarea
label="Meeting Notes"
placeholder="Start typing your notes..."
autoGrow
rows={3}
maxRows={15}
showCount
/>