> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lyzn.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Textarea

> Multi-line text input with character counting and validation

# 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

```jsx theme={null}
<Textarea placeholder="Enter your message..." />
```

### With Label

```jsx theme={null}
<Textarea label="Message" placeholder="Type your message here..." />
```

### Required Field

```jsx theme={null}
<Textarea label="Description" required placeholder="Enter description..." />
```

### Custom Rows

```jsx theme={null}
<Textarea label="Bio" rows={6} placeholder="Tell us about yourself..." />
```

### With Error State

```jsx theme={null}
<Textarea
  label="Comments"
  value="Too short"
  error="Please enter at least 50 characters"
/>
```

### With Helper Text

```jsx theme={null}
<Textarea
  label="Feedback"
  placeholder="Share your thoughts..."
  helperText="Your feedback helps us improve"
/>
```

### Character Count

```jsx theme={null}
<Textarea
  label="Tweet"
  placeholder="What's happening?"
  maxLength={280}
  showCount
/>
```

### Without Submit Button

```jsx theme={null}
<Textarea
  name="description"
  label="Description"
  showSubmit={false}
  placeholder="Enter description..."
/>
```

### Auto-grow

```jsx theme={null}
<Textarea
  label="Notes"
  placeholder="Start typing..."
  autoGrow
  rows={2}
  maxRows={10}
/>
```

### Custom Radius

```jsx theme={null}
<Col gap="md">
  <Textarea label="Sharp" radius="sm" placeholder="Sharp corners" />
  <Textarea label="Rounded" radius="lg" placeholder="Rounded corners" />
</Col>
```

## Common Patterns

### Feedback Form

```jsx theme={null}
<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

```jsx theme={null}
<Textarea
  placeholder="Write a comment..."
  submitLabel="Post"
  rows={3}
/>
```

### Bio Editor

```jsx theme={null}
<Textarea
  label="Bio"
  placeholder="Write something about yourself..."
  maxLength={500}
  showCount
  helperText="A brief description for your profile"
  rows={4}
/>
```

### Message Composer

```jsx theme={null}
<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

```jsx theme={null}
<Textarea
  label="Meeting Notes"
  placeholder="Start typing your notes..."
  autoGrow
  rows={3}
  maxRows={15}
  showCount
/>
```