# Wrapper

{% hint style="info" %}
This is a compound component.
{% endhint %}

### API

This component extends the native [\<div>](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes) API. That's why the `className` prop is not included in the table.

| Props              | Type        | Required |
| ------------------ | ----------- | -------- |
| `children`         | `ReactNode` | ✅        |
| `maxLengthCounter` | `number`    | :x:      |
| `hasError`         | `boolean`   | :x:      |
| `isDisabled`       | `boolean`   | :x:      |
| `isReadOnly`       | `boolean`   | :x:      |

<details>

<summary>children</summary>

The children in this case, because it is a compound component, should be the ones provided by this design system.&#x20;

</details>

<details>

<summary>maxLengthCounter</summary>

A visual representation of the max length passed to the textarea. Not to be used on the Control subcomponent. This does NOT controls the maxLength of the Textarea.

</details>

<details>

<summary>hasError</summary>

The hasError prop sets the component state to an error state, changing its colors by the ones defined in the tokens.

</details>

<details>

<summary>isDisabled</summary>

Disabled the component by changing its state.&#x20;

</details>

<details>

<summary>isReadOnly</summary>

This causes the component to  read only. This overrides the hasError state.

</details>