# EuiSectionHeaderComponent

**Type:** component



Section header component that provides a grouped container with optional expand/collapse functionality
and customizable label content. Used to organize and separate content sections with clear visual hierarchy.

### Basic usage
```html
<eui-section-header>
  <eui-section-header-title>Section Title</eui-section-header-title>
  <eui-section-header-description>Description text</eui-section-header-description>
</eui-section-header>
```

### With icon and action
```html
<eui-section-header>
  <eui-section-header-icon icon="info"></eui-section-header-icon>
  <eui-section-header-title>Settings</eui-section-header-title>
  <eui-section-header-action>
    <button euiButton>Edit</button>
  </eui-section-header-action>
</eui-section-header>
```

### Expandable section
```html
<eui-section-header
  [isExpandable]="true"
  [isExpanded]="expanded"
  (expand)="onToggle($event)">
  <eui-section-header-title>Advanced Options</eui-section-header-title>
</eui-section-header>
```

### Accessibility
- Expandable sections use proper ARIA attributes for disclosure widgets
- Keyboard accessible expand/collapse with Enter and Space
- Clear visual indicators for expanded/collapsed state
- Action buttons maintain their own accessibility requirements

### Notes
- Use `isFirst` to remove top border for the first section in a group
- Supports color variants via `euiVariant` (primary, secondary, success, etc.)
- `euiHighlighted` adds visual emphasis to important sections
- Combine with content containers for complete section structure


**Selector:** `eui-section-header`

## Inputs
- **e2eAttr**: `string` - Element attribute for e2e testing
- **id**: `string` - Unique identifier for the fieldset
- **isExpandable**: `boolean` - Whether the fieldset can be expanded/collapsed
- **isExpanded**: `boolean` - Whether the fieldset is currently expanded
- **isFirst**: `boolean` - Whether this is the first fieldset in a group
- **euiPrimary**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSecondary**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSuccess**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiInfo**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiWarning**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiDanger**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiVariant**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiHighlighted**: `any` - From host directive: #[[file:BaseStatesDirective.md]]

## Outputs
- **expand**: `EventEmitter<string>` - Event emitted when the fieldset is expanded or collapsed