# EuiFieldsetComponent

**Type:** component



`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
```html
<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
```html
<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


**Selector:** `eui-fieldset`

## Inputs
- **e2eAttr**: `string` - Data attribute used for end-to-end testing identification.
- **hasDefaultIcon**: `boolean` - Displays a default icon in the fieldset header when no custom icon is specified. Provides visual consistency across fieldsets.
- **hasLeftExpander**: `boolean` - Positions the expand/collapse toggle button on the left side of the header. By default, the expander appears on the right.
- **iconClass**: `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**: `string` - Fill color applied to the SVG icon in the fieldset header. Accepts CSS color values to customize icon appearance.
- **iconSvgName**: `string` - Name of the SVG icon to display in the fieldset header. Follows EUI icon naming conventions for consistent visual language.
- **id**: `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**: `boolean` - Enables expand/collapse functionality for the fieldset content. Adds an interactive toggle button to the header for showing/hiding content.
- **isExpanded**: `boolean` - Controls the expanded state of the fieldset content. Only effective when isExpandable is true.
- **isFirst**: `boolean` - Removes top margin when the fieldset is the first in a sequence. Ensures proper spacing in stacked fieldset layouts.
- **isLarge**: `boolean` - Applies larger sizing to the fieldset header and spacing. Used to create visual hierarchy or emphasize important sections.
- **label**: `string` - Primary text displayed in the fieldset header. Provides a descriptive title for the grouped content.
- **euiPrimary**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSecondary**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSuccess**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiInfo**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiWarning**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiDanger**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiVariant**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiHighlighted**: `any` - From host directive: #[[file:BaseStatesDirective.md]]

## Outputs
- **expand**: `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.