---
description: The TextInput component wrapper.
---

# 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` | ✅        |
| `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>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>
