> 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/subcomponents.md).

# SubComponents

### Tab

The Tab subcomponent is used to wrap the content and title of each tab. 

### Tab 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 |
| ------------ | ------------------------------------ | -------- |
| `value`      | `string`                             | ✅        |
| `isDisabled` | `boolean`                            | ❌        |
| `onClick`    | `(event: React.MouseEvent) => void;` | ❌        |
| `children`   | `ReactNode`                          | ❌        |

<details>

<summary>value</summary>

Necessary for managing the chosen tab, a string that subsequently gets passed to the `onChange`function for reordering the value.

</details>

<details>

<summary>isDisabled</summary>

Controls if the tab should show a disabled state.

</details>

<details>

<summary>onClick</summary>

Function that is executed when the tab is clicked. Usually used when changing the selectedTab when using a controlled approach.

</details>

<details>

<summary>children</summary>

The `Tab` subcomponent must consistently include `Tab.Title` and `Tab.Content` as its child elements.

</details>

### Divider

Subcomponent employed to visually separate tabs, offering flexibility in its placement.

### Divider API

This component extends the native [\<div>](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes) API.&#x20;

### Title

The tab's title, which can either be a string or an HTML structure.

### Title 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 width="175.33333333333331">Props</th><th width="144">Type</th><th>Required</th></tr></thead><tbody><tr><td>children</td><td>ReactNode</td><td>✅</td></tr></tbody></table>

<details>

<summary>children</summary>

The children prop can either receive a string or a complete strucure. You can use `Badges, Icons and Loaders`.

</details>

{% hint style="info" %}
You have the option to use the[`<TabGroup.Badge />,`](/sds/sds-3.0/sds-components/components/badges.md) [`<TabGroup.Icon />`](https://2600hz.gitbook.io/comm.land-components/), and [`<TabGroup.Loader />`](/sds/sds-3.0/sds-components/components/loader.md) without the need for installation or importing. Please note that icons and loaders will consistently maintain a default size that cannot be overridden.
{% endhint %}

{% tabs %}
{% tab title="Title with Badge" %}

```tsx
<TabGroup.Tab value="tab1">
  <TabGroup.Title>
    I am tab 1
    <TabGroup.Badge color="green" isCounter>
      10
    </TabGroup.Badge>
  </TabGroup.Title>
  <TabGroup.Content>Some content at 1</TabGroup.Content>
</TabGroup.Tab>;
```

{% endtab %}

{% tab title="Titlte with Icon" %}

```tsx
<TabGroup.Tab value="tab1">
  <TabGroup.Title>
    I am tab 1
      <TabGroup.Icon iconName='apps' />
  </TabGroup.Title>
  <TabGroup.Content>Some content at 1</TabGroup.Content>
</TabGroup.Tab>;
```

{% endtab %}

{% tab title="Title with Loader" %}

```tsx
<TabGroup.Tab value="tab1">
  <TabGroup.Title>
    I am a title 1
    <TabGroup.Loader />
  </TabGroup.Title>
  <TabGroup.Content>Some content at 1</TabGroup.Content>
</TabGroup.Tab>;
```

{% endtab %}
{% endtabs %}

### Content

This subcomponent controls the body rendered inside the component, it can be wether a string or an HTML structure.

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

<details>

<summary>children</summary>

The structure/string passed to the subcomponent used to render the content, this can render any structure, including badges, paragraphs, loaders, icons, etc.

</details>