---
sidebar_position: 3
---

import { Textarea } from "rizzui";
import Paper from "@site/src/components/paper";
import TextareaCharacterCount, { TextareaClear } from "@site/src/components/text-area";

# Textarea

A basic widget for getting the user text or messages.

```tsx
import { Textarea } from "rizzui";
```

<div className="mb-20 md:mb-28" />

## Default

The default style of **Textarea** component.

<Paper className="text-gray-950 block">
  <Textarea label="Message" />
</Paper>

```tsx
import { Textarea } from "rizzui";

export default function App() {
  return (
    <Textarea
      label="Message"
      placeholder="Write you message..."
    />
  );
}
```

<div className="mb-16" />

## Variants

You can change the style of **Textarea** using [**variant**](#textarea-variants) property.

<Paper className="grid grid-cols-1 sm:grid-cols-2 gap-4">
  <Textarea
    label="Outline"
    placeholder="Enter your message"
  />
  <Textarea
    label="Flat"
    variant="flat"
    placeholder="Enter your message"
  />
  <Textarea
    label="Text"
    variant="text"
    placeholder="Enter your message"
  />
</Paper>

```tsx
import { Textarea } from "rizzui";

export default function App() {
  return (
    <>
      <Textarea
        label="Outline"
        placeholder="Enter your message"
      />
      <Textarea
        label="Flat"
        variant="flat"
        placeholder="Enter your message"
      />
      <Textarea
        label="Text"
        variant="text"
        placeholder="Enter your message"
      />
    </>
  );
}
```

<div className="mb-16" />

## Sizes

You can change the style of **Textarea** using [**size**](#textarea-sizes) property.

<Paper className="gap-4 flex-row flex-wrap justify-start items-start">
  <Textarea
    label="Small"
    placeholder="Enter your message"
    size="sm"
  />
  <Textarea
    label="Default"
    placeholder="Enter your message"
  />
  <Textarea
    label="Large"
    placeholder="Enter your message"
    size="lg"
  />
  <Textarea
    label="Extra Large"
    placeholder="Enter your message"
    size="xl"
  />
</Paper>

```tsx
import { Textarea } from "rizzui";

export default function App() {
  return (
    <>
      <Textarea
        label="Small"
        placeholder="Enter your message"
        size="sm"
      />
      <Textarea
        label="Default"
        placeholder="Enter your message"
      />
      <Textarea
        label="Large"
        placeholder="Enter your message"
        size="lg"
      />
      <Textarea
        label="Extra Large"
        placeholder="Enter your message"
        size="xl"
      />
    </>
  );
}
```

<div className="mb-16" />

## Rounded

You can change the style of **Textarea** using [**rounded**](#textarea-rounded) property.

<Paper className="gap-4 flex-row flex-wrap justify-start items-start">
  <Textarea
    label="Rounded Small"
    placeholder="Enter your message"
    rounded="sm"
    className="w-full sm:w-auto"
  />
  <Textarea
    label="Rounded Default"
    placeholder="Enter your message"
    className="w-full sm:w-auto"
  />
  <Textarea
    label="Rounded Large"
    placeholder="Enter your message"
    rounded="lg"
    className="w-full sm:w-auto"
  />
  <Textarea
    label="Rounded None"
    placeholder="Enter your message"
    rounded="none"
    className="w-full sm:w-auto"
  />
</Paper>

```tsx
import { Textarea } from "rizzui";

export default function App() {
  return (
    <>
      <Textarea
        label="Rounded Small"
        placeholder="Enter your message"
        rounded="sm"
      />
      <Textarea
        label="Rounded Default"
        placeholder="Enter your message"
      />
      <Textarea
        label="Rounded Large"
        placeholder="Enter your message"
        rounded="lg"
      />

      <Textarea
        label="Rounded None"
        placeholder="Enter your message"
        rounded="none"
      />
    </>
  );
}
```

<div className="mb-16" />

## With Custom Rows & Cols

You can change rows and cols of **Textarea** using **rows** & **cols** property.

<Paper className="block">
  <Textarea
    rows={6}
    cols={50}
    label="Message"
    placeholder="Enter your message"
    textareaClassName="overflow-y-auto w-full md:w-auto"
    defaultValue="Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate architecto aliquam nulla et!
    Amet corrupti a consectetur aliquid qui eius soluta! Quibusdam debitis natus optio quasi
    assumenda provident dolores animi? Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Voluptate architecto aliquam nulla et! Amet corrupti a consectetur aliquid qui eius soluta!
    Quibusdam debitis natus optio quasi assumenda provident dolores animi?"
  />
</Paper>

```tsx
import { Textarea } from "rizzui";

export default function App() {
  return (
    <Textarea
      rows={6}
      cols={50}
      label="Message"
      placeholder="Enter your message"
      textareaClassName="overflow-y-auto w-full md:w-auto"
      defaultValue="Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate architecto aliquam nulla et!
    Amet corrupti a consectetur aliquid qui eius soluta! Quibusdam debitis natus optio quasi
    assumenda provident dolores animi? Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Voluptate architecto aliquam nulla et! Amet corrupti a consectetur aliquid qui eius soluta!
    Quibusdam debitis natus optio quasi assumenda provident dolores animi?"
    />
  );
}
```

<div className="mb-16" />

## With Character Count

You can set character limit and show character counter of **Textarea** using **maxLength** & **renderCharacterCount** property.

<Paper className="block">
  <TextareaCharacterCount />
</Paper>

```tsx
import { useState } from "react";
import { Textarea } from "aegon-ui";

export default function App() {
  const [state, setState] = useState("Do not lose hope, nor be sad.");

  return (
    <Textarea
      label="Message"
      value={state}
      maxLength={100}
      onChange={(e) => setState(e.target.value)}
      renderCharacterCount={({ characterCount, maxLength }) => (
        <div className="text-right text-sm opacity-70 rtl:text-left">
          {characterCount}/{maxLength}
        </div>
      )}
    />
  );
}
```

<div className="mb-16" />

## With Clearable Button

You can add a clear button of **Textarea** using **clearable** property.

<Paper className="block">
  <TextareaClear />
</Paper>

```tsx
import { useState } from "react";
import { Textarea } from "aegon-ui";

export default function App() {
  const [state, setState] = useState(
    "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout."
  );

  return (
    <Textarea
      label="Message"
      clearable
      value={state}
      onClear={() => setState("")}
      onChange={(e) => setState(e.target.value)}
    />
  );
}
```

<div className="mb-16" />

## Disabled

You can change disable state of **Textarea** using **disabled** property.

<Paper className="block">
  <Textarea
    disabled
    label="Message"
    placeholder="Enter your message"
  />
</Paper>

```tsx
import { Textarea } from "rizzui";

export default function App() {
  return (
    <Textarea
      disabled
      label="Message"
      placeholder="Enter your message"
    />
  );
}
```

<div className="mb-16" />

## With Helper Text

You can add helper text to **Textarea** using **helperText** property.

<Paper className="block">
  <Textarea
    label="Message"
    placeholder="Enter your message"
    helperText="This is helper text."
  />
</Paper>

```tsx
import { Textarea } from "rizzui";

export default function App() {
  return (
    <Textarea
      label="Message"
      placeholder="Enter your message"
      helperText="This is helper text."
    />
  );
}
```

<div className="mb-16" />

## With Error Message

You can show the validation error message using **error** property.

<Paper className="block">
  <Textarea
    label="Message"
    error="This field is required"
    placeholder="Enter your message"
  />
</Paper>

```tsx
import { Textarea } from "rizzui";

export default function App() {
  return (
    <Textarea
      label="Message"
      error="This field is required"
      placeholder="Enter your message"
    />
  );
}
```

<div className="mb-20" />

## API Reference

<hr />

<div className="mb-10" />

### Textarea Props

Here is the API documentation of the Textarea component. And the rest of the props are the same as the original html textarea field.

<div className="overflow-x-auto">

|        Props         |                               Type                               |                                Description                                |   Default   |
| :------------------: | :--------------------------------------------------------------: | :-----------------------------------------------------------------------: | :---------: |
|        label         |                           `ReactNode`                            |                              Set field label                              |    \_\_     |
|     labelWeight      |                   [LabelWeight](#label-weight)                   |                           Set label font weight                           | `"medium"`  |
|       variant        |              [TextareaVariants](#textarea-variants)              |                    The variants of the component are:                     | `"outline"` |
|         size         |                 [TextareaSizes](#textarea-sizes)                 | The size of the component. "sm" is equivalent to the dense input styling. |   `"md"`    |
|       rounded        |               [TextareaRounded](#textarea-rounded)               |                         The rounded variants are:                         |   `"md"`    |
|       children       |                           `ReactNode`                            |                         Default value in textarea                         |    \_\_     |
|         cols         |                             `number`                             |                              Set custom cols                              |    \_\_     |
|         rows         |                             `number`                             |                              Set custom rows                              |     `5`     |
|     placeholder      |                             `string`                             |                                                                           |    \_\_     |
|       disabled       |                            `boolean`                             |                     Whether the textarea is disabled                      |    \_\_     |
|        error         |                             `string`                             |                    Show error message using this prop                     |    \_\_     |
|      helperText      |                           `ReactNode`                            |         Add helper text. It could be string or a React component          |    \_\_     |
|      clearable       |                            `boolean`                             |                           add clearable option                            |    \_\_     |
|       onClear        |               [TextareaOnclear](#textarea-onclear)               |                                clear event                                |    \_\_     |
| renderCharacterCount | [TextareaRenderCharacterCount](#textarea-render-character-count) |                Use this prop to show character count limit                |    \_\_     |
|    labelClassName    |                             `string`                             |      Use labelClassName prop to do some addition style for the label      |    \_\_     |
|  textareaClassName   |                             `string`                             |            Add custom classes for the input filed extra style             |    \_\_     |
|   helperClassName    |                             `string`                             |        This prop allows you to customize the helper message style         |    \_\_     |
|    errorClassName    |                             `string`                             |         This prop allows you to customize the error message style         |    \_\_     |
|      className       |                             `string`                             |              Add custom classes to the root of the component              |    \_\_     |
|         ref          |                    `Ref<HTMLTextAreaElement>`                    |                                                                           |    \_\_     |
|         ...          |                     `TextareaHTMLAttributes`                     |  native props like **value**, **onChange**, **onFocus**, **onBlur** ...   |    \_\_     |

</div>

<div className="mb-10" />

### Textarea Variants

```ts
type TextareaVariants = "outline" | "flat" | "text";
```

<div className="mb-10" />

### Label Weight

```ts
type LabelWeight = "normal" | "medium" | "semibold" | "bold";
```

<div className="mb-10" />

### Textarea Sizes

```ts
type TextareaSizes = "sm" | "md" | "lg" | "xl";
```

<div className="mb-10" />

### Textarea Rounded

```ts
type TextareaRounded = "sm" | "md" | "lg" | "xl" | "none";
```

<div className="mb-10" />

<div className="mb-10" />

### Textarea onClear

```ts
type TextareaOnclear = (event) => void;
```

<div className="mb-10" />

### Textarea Render Character Count

```ts
type TextareaRenderCharacterCount =
  | (({ characterCount, maxLength }: { characterCount?: number; maxLength?: number }) => ReactNode)
  | undefined;
```
