### 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
Public collapseMenuLabel Public expandMenuLabel templates
###### Methods
onToggle
###### Inputs
e2eAttr hasDefaultIcon hasLeftExpander iconClass iconSvgFillColor iconSvgName id isExpandable isExpanded isFirst isLarge label
###### Outputs
expand
###### HostBindings
class
###### Accessors
cssClasses

### 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
get `cssClasses()`
CSS classes applied to the host element Returns : `string`

# results matching ""

# No results matching ""