eui documentation
  1. Components
  2. EuiFieldsetComponent

File

packages/components/eui-fieldset/eui-fieldset.component.ts

Description

eui-fieldset is a container component that groups related form controls or content sections with a labeled border. eui-fieldset supports collapsible/expandable behavior, custom icons, and flexible content projection. Commonly used to organize complex forms into logical sections or create accordion-style interfaces. eui-fieldset Provides visual hierarchy through theming variants and size options.

Basic fieldset

Example :
<eui-fieldset label="Personal Information">
  <eui-input-text label="Name"></eui-input-text>
  <eui-input-text label="Email"></eui-input-text>
</eui-fieldset>

Expandable fieldset

Example :
<eui-fieldset
  label="Advanced Options"
  [isExpandable]="true"
  [isExpanded]="false"
  (expand)="onExpand($event)">
  <ng-template euiTemplate="eui-fieldset-content">
    <p>Collapsible content here</p>
  </ng-template>
</eui-fieldset>

Accessibility

  • Uses semantic <fieldset> and <legend> elements for proper form grouping
  • Expand/collapse button includes descriptive aria-label
  • Keyboard navigation supported for expandable fieldsets

Notes

  • Use isExpandable with lazy-loaded content via euiTemplate for performance
  • Apply state variants (euiPrimary, euiSuccess, etc.) for visual emphasis
  • Set isFirst to remove top margin in stacked layouts

Implements

AfterContentInit

Metadata

HostDirectives BaseStatesDirective
 Inputs : euiPrimary euiSecondary euiSuccess euiInfo euiWarning euiDanger euiVariant euiHighlighted 
selector eui-fieldset
imports NgTemplateOutlet EUI_ICON EUI_ICON_BUTTON_EXPANDER EUI_ICON_STATE
templateUrl ./eui-fieldset.component.html
styleUrl ./eui-fieldset.scss

Index

Properties
Methods
Inputs
Outputs
HostBindings
Accessors

Inputs

e2eAttr
Type : string
Default value : 'eui-fieldset'

Data attribute used for end-to-end testing identification.
hasDefaultIcon
Type : boolean
Default value : false

Displays a default icon in the fieldset header when no custom icon is specified. Provides visual consistency across fieldsets.
hasLeftExpander
Type : boolean
Default value : false

Positions the expand/collapse toggle button on the left side of the header. By default, the expander appears on the right.
iconClass
Type : string

CSS class name for a custom icon displayed in the fieldset header. Alternative to iconSvgName for using icon fonts or custom icon implementations.
iconSvgFillColor
Type : string

Fill color applied to the SVG icon in the fieldset header. Accepts CSS color values to customize icon appearance.
iconSvgName
Type : string

Name of the SVG icon to display in the fieldset header. Follows EUI icon naming conventions for consistent visual language.
id
Type : string

Unique identifier for the fieldset element. Emitted in the expand event to identify which fieldset was toggled. Required when using expandable fieldsets to track state.
isExpandable
Type : boolean
Default value : false

Enables expand/collapse functionality for the fieldset content. Adds an interactive toggle button to the header for showing/hiding content.
isExpanded
Type : boolean
Default value : true

Controls the expanded state of the fieldset content. Only effective when isExpandable is true.
isFirst
Type : boolean
Default value : false

Removes top margin when the fieldset is the first in a sequence. Ensures proper spacing in stacked fieldset layouts.
isLarge
Type : boolean
Default value : false

Applies larger sizing to the fieldset header and spacing. Used to create visual hierarchy or emphasize important sections.
label
Type : string

Primary text displayed in the fieldset header. Provides a descriptive title for the grouped content.

Outputs

expand
Type : EventEmitter<string>

Emitted when the fieldset is expanded or collapsed. Payload: string containing the fieldset's id property. Triggered by user interaction with the expand/collapse toggle.

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
templates
Type : QueryList<EuiTemplateDirective>
Decorators :
@ContentChildren(EuiTemplateDirective)

Query list of template directives for content projection

Accessors

cssClasses
getcssClasses()

CSS classes applied to the host element

Returns : string

results matching ""

    No results matching ""