eui documentation
  1. Components
  2. EuiSectionHeaderComponent

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
Methods
Inputs
Outputs
HostBindings
Accessors

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
getcssClasses()

CSS classes applied to the host element

Returns : string

results matching ""

    No results matching ""