# Textarea

> Cherry Textarea component - multiline text input with validation states.

Source: https://cherry.al/code/textarea

> For the complete documentation index, see [llms.txt](https://cherry.al/llms.txt).

# Textarea

<iframe className="light-only" src="https://demo.cherry.al/preview/textarea?theme=light" title="Textarea" loading="lazy" style={{ width: "100%", height: "320px", border: "1px solid var(--color-grayLight)", borderRadius: "12px" }} />
<iframe className="dark-only" src="https://demo.cherry.al/preview/textarea?theme=dark" title="Textarea" loading="lazy" style={{ width: "100%", height: "320px", border: "1px solid var(--color-grayLight)", borderRadius: "12px" }} />

Textarea allows for multiple lines of text and shares most of the [Input](/code/input) component's properties: `$label`, `$size`, `$error`, `$success`, `$fullWidth`, and `$wrapperClassName`. Unlike Input, it does not support `$icon` or `$iconPosition`. Textareas can have error or success states to provide feedback to the user.

Keep in mind that the `<textarea>` element inherently includes native browser properties like `onChange`. Cherry UI components introduce custom properties that always begin with a `$` to distinguish them from native props. To pre-fill the content, use the native `value` or `defaultValue` attributes rather than passing children.

For design guidelines and all interactive states, see the [Inputs](/inputs) design page.

```jsx
import React from "react";
import { Textarea } from "cherry-styled-components";

export default function Page() {
  return <Textarea placeholder="Placeholder" />;
}
```

With a label:

```html
<Textarea $label="Username" $fullWidth />
```

With success and error states:

```html
<Textarea $success placeholder="Yay" />
<Textarea $error placeholder="Ops" />
```

## Properties

<Field value="$label" type="string">
  Label text displayed above the textarea.
</Field>

<Field value="$size" type='"default" | "big" | "small"'>
  Size of the textarea.
</Field>

<Field value="$error" type="boolean">
  Shows error state styling.
</Field>

<Field value="$success" type="boolean">
  Shows success state styling.
</Field>

<Field value="$fullWidth" type="boolean">
  Makes the textarea span the full width of its container.
</Field>

<Field value="rows" type="number">
  Number of visible text rows.
</Field>

<Field value="$wrapperClassName" type="string">
  Class name applied to the wrapper element around the textarea, for restyling from the outside.
</Field>

<Button href="https://github.com/cherry-design-system/styled-components/blob/main/src/lib/textarea.tsx" icon="code" iconPosition="left">
  View Source
</Button>