# EuiSectionHeaderComponent

**Type:** component

<p>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.</p>
<h3>Basic usage</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-section-header&gt;
  &lt;eui-section-header-title&gt;Section Title&lt;/eui-section-header-title&gt;
  &lt;eui-section-header-description&gt;Description text&lt;/eui-section-header-description&gt;
&lt;/eui-section-header&gt;</code></pre></div><h3>With icon and action</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-section-header&gt;
  &lt;eui-section-header-icon icon=&quot;info&quot;&gt;&lt;/eui-section-header-icon&gt;
  &lt;eui-section-header-title&gt;Settings&lt;/eui-section-header-title&gt;
  &lt;eui-section-header-action&gt;
    &lt;button euiButton&gt;Edit&lt;/button&gt;
  &lt;/eui-section-header-action&gt;
&lt;/eui-section-header&gt;</code></pre></div><h3>Expandable section</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-section-header
  [isExpandable]=&quot;true&quot;
  [isExpanded]=&quot;expanded&quot;
  (expand)=&quot;onToggle($event)&quot;&gt;
  &lt;eui-section-header-title&gt;Advanced Options&lt;/eui-section-header-title&gt;
&lt;/eui-section-header&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Expandable sections use proper ARIA attributes for disclosure widgets</li>
<li>Keyboard accessible expand/collapse with Enter and Space</li>
<li>Clear visual indicators for expanded/collapsed state</li>
<li>Action buttons maintain their own accessibility requirements</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Use <code>isFirst</code> to remove top border for the first section in a group</li>
<li>Supports color variants via <code>euiVariant</code> (primary, secondary, success, etc.)</li>
<li><code>euiHighlighted</code> adds visual emphasis to important sections</li>
<li>Combine with content containers for complete section structure</li>
</ul>


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

**Standalone:** false

## Inputs

- **e2eAttr**: `string` - <p>Element attribute for e2e testing</p>

- **id**: `string` - <p>Unique identifier for the fieldset</p>

- **isExpandable**: `boolean` - <p>Whether the fieldset can be expanded/collapsed</p>

- **isExpanded**: `boolean` - <p>Whether the fieldset is currently expanded</p>

- **isFirst**: `boolean` - <p>Whether this is the first fieldset in a group</p>


## Outputs

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

