### File

`packages/components/eui-section-header/eui-section-header.component.ts`

### Description

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

Example :

    <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

Example :

    <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

Example :

    <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

### Metadata

HostDirectives | `BaseStatesDirective` Inputs : euiPrimary euiSecondary euiSuccess euiInfo euiWarning euiDanger euiVariant euiHighlighted
selector | `eui-section-header`
imports | `EUI_ICON_BUTTON_EXPANDER`
templateUrl | `./eui-section-header.component.html`
styleUrl | `./eui-section-header.scss`

### Index

###### Properties

- Public collapseMenuLabel
- Public expandMenuLabel

###### Methods

- onToggle

###### Inputs

- e2eAttr
- id
- isExpandable
- isExpanded
- isFirst

###### Outputs

- expand

###### HostBindings

- class

###### Accessors

- cssClasses

### Inputs

e2eAttr
Type : `string`
Default value : `'eui-section-header'`
Element attribute for e2e testing

id
Type : `string`
Unique identifier for the fieldset

isExpandable
Type : `boolean`
Default value : `false`
Whether the fieldset can be expanded/collapsed

isExpanded
Type : `boolean`
Default value : `true`
Whether the fieldset is currently expanded

isFirst
Type : `boolean`
Default value : `false`
Whether this is the first fieldset in a group

### Outputs

expand
Type : `EventEmitter<string>`
Event emitted when the fieldset is expanded or collapsed

### HostBindings

class
Type : `string`
CSS classes applied to the host element

### Methods

onToggle
`onToggle()`
Handles expand/collapse toggle events Emits the fieldset ID when toggled Returns : `void`

### Properties

Public collapseMenuLabel
Type : `string`
Default value : `'Collapse'`
Label for collapse button accessibility

Public expandMenuLabel
Type : `string`
Default value : `'Expand'`
Label for expand button accessibility

### Accessors

cssClasses
get `cssClasses()`
CSS classes applied to the host element Returns : `string`

# results matching ""

# No results matching ""