# TabComponent

Tab layout component

## Installation

```tsx
import { TabComponent } from 'uxp/components';
```

## Signature

```tsx
const TabComponent: React.FunctionComponent<TabComponentProps>
```

## Examples

```tsx
<TabComponent
  tabs={[
     {id: 'general' , label:'General', content: <div> General Tab </div>},
     {id: 'advanced' , label:'Advanced', content: <div> Advanced Tab </div>},
  ]}
  selected={selectedTab}
  onChangeTab={setSelectedTab}
/>
```

## Properties

| Name        | Type                                                                                              | Mandatory | Default Value | Example Value |
| ----------- | ------------------------------------------------------------------------------------------------- | --------- | ------------- | ------------- |
| tabs        | [Tab\[\]](https://help.iviva.com/uxp/v5/additional-resources/types/tab)                           | Yes       | -             | -             |
| selected    | string                                                                                            | Yes       | -             | -             |
| onChangeTab | (tab: string) => void                                                                             | Yes       | -             | -             |
| direction   | 'vertical' \| 'horizontal'                                                                        | No        | -             | -             |
| position    | 'top' \| 'bottom' \| 'left' \| 'right'                                                            | No        | -             | -             |
| styles      | [TabComponentStyles](https://help.iviva.com/uxp/v5/additional-resources/types/tabcomponentstyles) | No        | -             | -             |
| className   | string                                                                                            | No        | -             | -             |

## Related Types

* [TabComponentProps](https://help.iviva.com/uxp/v5/additional-resources/types/tabcomponentprops)
* [Tab](https://help.iviva.com/uxp/v5/additional-resources/types/tab)
* [TabComponentStyles](https://help.iviva.com/uxp/v5/additional-resources/types/tabcomponentstyles)