---
description: The Dropdown component wrapper
---

# Wrapper

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

### API

This component extends the native div tag props. This means this component can receive the native html div attributes, for example, the `className` attribute (which is why it's not included in the table).

<table><thead><tr><th>Props</th><th width="249.33333333333331">Type</th><th>Required</th></tr></thead><tbody><tr><td><code>children</code></td><td><code>ReactNode</code></td><td>✅</td></tr><tr><td><code>isDisabled</code></td><td><code>boolean</code></td><td>❌</td></tr><tr><td><code>hasError</code></td><td><code>boolean</code></td><td>❌</td></tr><tr><td><code>isReadOnly</code></td><td><code>boolean</code></td><td>❌</td></tr></tbody></table>

<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>

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

</details>

<details>

<summary>isReadOnly</summary>

Changes the component styles and becomes to a read-only state.

</details>

