---
title: Text area
description: Text areas allow users to enter multi-line text content for longer form inputs.
category: Forms
related: [TextField, Label, Container]
commonPatterns: [form-comments, description-input, long-text-input]
---

Source: https://clickhouse.design/click-ui/textArea

# Text area

Text areas allow users to enter multi-line text content. They are ideal for longer form inputs like comments, descriptions, or messages.

## Example

## Props

| Prop        | Type                   | Default value | Description                                                                 |
| ----------- | ---------------------- | ------------- | --------------------------------------------------------------------------- |
| placeholder | `string`               | `""`          | Placeholder text displayed when the textarea is empty                       |
| label       | `ReactNode`            | `""`          | Label text or content displayed above or beside the textarea                |
| size        | `"sm" \| "md" \| "lg"` | `"md"`        | Size variant of the textarea                                                |
| error       | `boolean`              | `false`       | Whether the textarea is in an error state, typically shown with red styling |
| disabled    | `boolean`              | `false`       | Whether the textarea is disabled and cannot be interacted with              |
| rows        | `number`               | `4`           | Number of visible text rows in the textarea                                 |

```tsx
import { TextAreaField as TextArea } from '@clickhouse/click-ui'
import { useState } from 'react'

function MyTextArea() {
const [value, setValue] = useState('')
return (
  <TextArea 
    id="example"
    label="Comments"
    placeholder="Enter your comments..."
    onChange={(value, e) => setValue(value)}
  />
)
}
```

## Quick start

```tsx
import { TextAreaField as TextArea } from '@clickhouse/click-ui'
import { useState } from 'react'

function MyTextArea() {
const [value, setValue] = useState('')
return (
  <TextArea 
    id="comments"
    label="Comments"
    placeholder="Enter your comments..."
    onChange={(value, e) => setValue(value)}
  />
)
}
```

## Related components

- **TextField**: For single-line text input.
- **Label**: Provides accessible labels for text areas.
- **Container**: For organizing text areas within forms.

## Common use cases

### Form comments

```tsx
import { TextAreaField as TextArea } from '@clickhouse/click-ui'
import { useState } from 'react'

function FormComments() {
const [comments, setComments] = useState('')
return (
  <TextArea
    id="comments"
    label="Additional Comments"
    placeholder="Enter any additional comments..."
    onChange={(value, e) => setComments(value)}
    rows={5}
  />
)
}
```

### Description input

```tsx
import { TextAreaField as TextArea } from '@clickhouse/click-ui'
import { useState } from 'react'

function DescriptionInput() {
const [description, setDescription] = useState('')
return (
  <TextArea
    id="description"
    label="Description"
    placeholder="Enter a description..."
    onChange={(value, e) => setDescription(value)}
    rows={6}
  />
)
}
```

### Long text input

```tsx
import { TextAreaField as TextArea, Container, Text } from '@clickhouse/click-ui'
import { useState } from 'react'

function LongTextInput() {
const [message, setMessage] = useState('')
return (
  <Container orientation='vertical' gap='sm'>
    <Text size='sm' color='muted'>Message (max 500 characters)</Text>
    <TextArea
      id="message"
      label="Message"
      placeholder="Enter your message..."
      onChange={(value, e) => setMessage(value)}
      rows={8}
    />
  </Container>
)
}
```

### States