# EuiTabBodyComponent

**Type:** component



Content container component for individual tab panels within eui-tabs.
Manages the display of tab content using CDK Portal for efficient rendering.
Provides optional padding control for custom content layouts.
Automatically handles content visibility based on active tab selection.
Must be used as a child of eui-tab component to define the tab's content area.

### Basic Usage
```html
<eui-tab label="Content">
  <eui-tab-body>
    <h2>Tab Content</h2>
    <p>Your content here</p>
  </eui-tab-body>
</eui-tab>
```

### Without Padding
```html
<eui-tab label="Full Width">
  <eui-tab-body [hasNoContentPadding]="true">
    <div class="custom-layout">
      Full-width content without default padding
    </div>
  </eui-tab-body>
</eui-tab>
```

### With Complex Content
```html
<eui-tab label="Dashboard">
  <eui-tab-body>
    <eui-card>
      <eui-card-header>Statistics</eui-card-header>
      <eui-card-body>
        <!-- Dashboard widgets -->
      </eui-card-body>
    </eui-card>
  </eui-tab-body>
</eui-tab>
```

### Accessibility
- Content has role="tabpanel" automatically applied
- Tabindex managed automatically for keyboard navigation
- Hidden content not rendered in DOM for performance
- Focus management for interactive elements within panel

### Notes
- Uses CDK Portal for efficient content rendering
- Only active tab content is displayed
- hasNoContentPadding useful for full-width layouts
- Supports any HTML content or Angular components
- Automatic focus management for nested interactive elements


**Selector:** `eui-tab-body`

## Inputs
- **hasNoContentPadding**: `boolean` - Removes default padding from the tab content area. Useful for full-width content, custom layouts, or when content provides its own spacing.