# EuiTabsComponent

**Type:** component



eUI Tabs component helps to organize content into separate views where only one view can be visible at a time.
Each tab's label is shown in the tab header and the active tab is designated with a primary ink bar visual.
The active tab may be set using the `activeTabIndex` input option or when the user selects one of the tab labels in the header.
When the list of tab labels exceeds the width of the header or its container, pagination controls appear to let the user scroll left and right across the tabs.

### Basic Usage
```html
<eui-tabs [activeTabIndex]="0" (activeTabChange)="onTabChange($event)">
  <eui-tab label="Overview">
    <eui-tab-body>
      <p>Overview content here</p>
    </eui-tab-body>
  </eui-tab>
  <eui-tab label="Details">
    <eui-tab-body>
      <p>Details content here</p>
    </eui-tab-body>
  </eui-tab>
</eui-tabs>
```

### With Custom Headers
```html
<eui-tabs>
  <eui-tab>
    <eui-tab-header>
      <eui-tab-header-left-content>
        <eui-icon svgName="home" />
      </eui-tab-header-left-content>
      <eui-tab-header-label>Home</eui-tab-header-label>
    </eui-tab-header>
    <eui-tab-body>Content</eui-tab-body>
  </eui-tab>
</eui-tabs>
```

### Accessibility
- Use role="tablist" on container (automatically applied)
- Each tab has role="tab" and associated panel has role="tabpanel"
- Keyboard navigation: Arrow keys to switch tabs, Tab to move focus
- Provide meaningful aria-label for the tabs component

### Notes
- Only one tab content is visible at a time
- Pagination controls appear automatically when tabs overflow
- Use isMainNavigation="true" for primary navigation styling
- Use isFlat="true" for flat visual style without elevation


**Selector:** `eui-tabs`

## Inputs
- **activeTabIndex**: `number` - Index of the active tab
- **ariaLabel**: `string` - Sets the `aria-label` attribute for the host element.
- **e2eAttr**: `string` - 
- **isFlat**: `boolean` - 
- **isMainNavigation**: `boolean` - 

## Outputs
- **tabActivate**: `EventEmitter` - Event emitted when a tab is activated
- **tabClick**: `EventEmitter` - Event emitted when a tab is clicked
- **tabClose**: `EventEmitter` - Event emitted when a tab is closed