> For the complete documentation index, see [llms.txt](https://2600hz.gitbook.io/sds/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://2600hz.gitbook.io/sds/sds-3.0/sds-components/components/tabgroup/code/wrapper.md).

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

<table><thead><tr><th>Props</th><th width="202.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>selectedTab</code></td><td><code>string</code></td><td>❌</td></tr><tr><td><code>defaultSelectedTab</code></td><td><code>string</code></td><td>❌</td></tr><tr><td><code>isFlex</code></td><td><code>boolean</code></td><td>❌</td></tr><tr><td><code>variant</code></td><td><code>'contained' | 'underlined'</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>selectedTab</summary>

The `selectedTab` passed directly as a props when using the controlled approach of the component.

</details>

<details>

<summary>defaultSelectedTab</summary>

The tab that will load when the component renders. This should be used when using an uncontrolled approach of the component.

</details>

<details>

<summary>isFlex</summary>

This prop changes the tabs styles making it so them take the 100% of the available container width.

</details>

<details>

<summary>variant</summary>

Prop used to change the way selectedTabs are presented.

</details>