Skip to main content

​
Textarea

The Textarea component provides a multi-line text input field with support for character counting, validation feedback, and auto-grow functionality.

​
Props

PropTypeDefaultDescription
namestring-Field name for form state management
labelstring-Textarea label
placeholderstring"Enter your message..."Placeholder text
valuestring""Initial value
rowsnumber4Number of visible rows
requiredbooleanfalseWhether field is required
disabledbooleanfalseDisabled state
submitLabelstring"Submit"Submit button label
showSubmitbooleantrueWhether to show submit button
errorstring-Error message to display
helperTextstring-Helper text below textarea
maxLengthnumber-Maximum character length
showCountbooleanfalseShow character count
radiusstring | number12Border radius: sm, md, lg, xl, or number
autoGrowbooleanfalseAuto-grow with content
maxRowsnumber8Maximum 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
/>