# EuiDisableContentComponent

**Type:** component

<p>A component that disables content and displays a semi-transparent overlay with optional notification.
Manages focus state and provides visual feedback when content is temporarily unavailable.
Useful for indicating loading states, processing operations, or temporarily disabled sections.</p>
<h3>Basic Usage</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-disable-content [isDisabled]=&quot;isProcessing&quot;&gt;
  &lt;form&gt;
    &lt;!-- Form content --&gt;
  &lt;/form&gt;
&lt;/eui-disable-content&gt;</code></pre></div><h3>With Notification</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-disable-content
  [isDisabled]=&quot;isSaving&quot;
  [disabledText]=&quot;&#39;Please wait while we save your changes&#39;&quot;&gt;
  &lt;div class=&quot;content-section&quot;&gt;
    &lt;!-- Content --&gt;
  &lt;/div&gt;
&lt;/eui-disable-content&gt;</code></pre></div><h3>Conditional Disabling</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-typescript">// Component
isFormDisabled = false;

submitForm(): void {
  this.isFormDisabled = true;
  this.api.submit().subscribe(() =&gt; {
    this.isFormDisabled = false;
  });
}

// Template
&lt;eui-disable-content [isDisabled]=&quot;isFormDisabled&quot;&gt;
  &lt;button (click)=&quot;submitForm()&quot;&gt;Submit&lt;/button&gt;
&lt;/eui-disable-content&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Automatically sets <code>aria-disabled=&quot;true&quot;</code> on focused elements when disabled</li>
<li>Manages focus state by storing and restoring last active element</li>
<li>Sets <code>tabindex=&quot;-1&quot;</code> on disabled elements to prevent keyboard navigation</li>
<li>Displays growl notification when clicking disabled content (if <code>disabledText</code> provided)</li>
<li>Restores focus to previously active element when re-enabled</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Wraps content with <code>&lt;ng-content/&gt;</code> for flexible composition</li>
<li>Requires <code>EuiGrowlService</code> for notification functionality</li>
<li>CSS class <code>eui-disable-content--disabled</code> applied when active</li>
<li>Does not prevent programmatic interaction, only visual and focus management</li>
<li>Use for temporary disabling; for permanent states, use native <code>disabled</code> attribute</li>
</ul>


**Selector:** `eui-disable-content`

**Standalone:** false

## Inputs

- **disabledText**: `undefined` - <p>Text to display in an eui-growl (type info) notification when clicking
the disabled content.</p>

- **isDisabled**: `boolean, BooleanInput` - <p>Controls whether the content is disabled. If disabled, a semi-transparent
overlay with spinner is shown.</p>

