# EuiFieldsetComponent

**Type:** component

<p><code>eui-fieldset</code> is a container component that groups related form controls or content sections with a labeled border.
<code>eui-fieldset</code> supports collapsible/expandable behavior, custom icons, and flexible content projection.
Commonly used to organize complex forms into logical sections or create accordion-style interfaces.
<code>eui-fieldset</code> Provides visual hierarchy through theming variants and size options.</p>
<h3>Basic fieldset</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-fieldset label=&quot;Personal Information&quot;&gt;
  &lt;eui-input-text label=&quot;Name&quot;&gt;&lt;/eui-input-text&gt;
  &lt;eui-input-text label=&quot;Email&quot;&gt;&lt;/eui-input-text&gt;
&lt;/eui-fieldset&gt;</code></pre></div><h3>Expandable fieldset</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-fieldset
  label=&quot;Advanced Options&quot;
  [isExpandable]=&quot;true&quot;
  [isExpanded]=&quot;false&quot;
  (expand)=&quot;onExpand($event)&quot;&gt;
  &lt;ng-template euiTemplate=&quot;eui-fieldset-content&quot;&gt;
    &lt;p&gt;Collapsible content here&lt;/p&gt;
  &lt;/ng-template&gt;
&lt;/eui-fieldset&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Uses semantic <code>&lt;fieldset&gt;</code> and <code>&lt;legend&gt;</code> elements for proper form grouping</li>
<li>Expand/collapse button includes descriptive aria-label</li>
<li>Keyboard navigation supported for expandable fieldsets</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Use <code>isExpandable</code> with lazy-loaded content via <code>euiTemplate</code> for performance</li>
<li>Apply state variants (euiPrimary, euiSuccess, etc.) for visual emphasis</li>
<li>Set <code>isFirst</code> to remove top margin in stacked layouts</li>
</ul>


**Selector:** `eui-fieldset`

**Standalone:** false

## Inputs

- **e2eAttr**: `string` - <p>Data attribute used for end-to-end testing identification.</p>

- **hasDefaultIcon**: `boolean` - <p>Displays a default icon in the fieldset header when no custom icon is specified.
Provides visual consistency across fieldsets.</p>

- **hasLeftExpander**: `boolean` - <p>Positions the expand/collapse toggle button on the left side of the header.
By default, the expander appears on the right.</p>

- **iconClass**: `string` - <p>CSS class name for a custom icon displayed in the fieldset header.
Alternative to iconSvgName for using icon fonts or custom icon implementations.</p>

- **iconSvgFillColor**: `string` - <p>Fill color applied to the SVG icon in the fieldset header.
Accepts CSS color values to customize icon appearance.</p>

- **iconSvgName**: `string` - <p>Name of the SVG icon to display in the fieldset header.
Follows EUI icon naming conventions for consistent visual language.</p>

- **id**: `string` - <p>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.</p>

- **isExpandable**: `boolean` - <p>Enables expand/collapse functionality for the fieldset content.
Adds an interactive toggle button to the header for showing/hiding content.</p>

- **isExpanded**: `boolean` - <p>Controls the expanded state of the fieldset content.
Only effective when isExpandable is true.</p>

- **isFirst**: `boolean` - <p>Removes top margin when the fieldset is the first in a sequence.
Ensures proper spacing in stacked fieldset layouts.</p>

- **isLarge**: `boolean` - <p>Applies larger sizing to the fieldset header and spacing.
Used to create visual hierarchy or emphasize important sections.</p>

- **label**: `string` - <p>Primary text displayed in the fieldset header.
Provides a descriptive title for the grouped content.</p>


## Outputs

- **expand**: `EventEmitter<string>` - <p>Emitted when the fieldset is expanded or collapsed.
Payload: string containing the fieldset&#39;s id property.
Triggered by user interaction with the expand/collapse toggle.</p>

