# EuiBlockContentComponent

**Type:** component

<p>Component that wraps content and manages focus state when content is blocked.
Provides accessibility attributes and handles focus restoration when blocking/unblocking.</p>
<h4>Basic blocked content</h4>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-block-content [isBlocked]=&quot;isLoading&quot;&gt;
  &lt;form&gt;
    &lt;input type=&quot;text&quot; /&gt;
    &lt;button&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
&lt;/eui-block-content&gt;</code></pre></div><h4>With custom ARIA attributes</h4>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-block-content
  role=&quot;region&quot;
  ariaLabel=&quot;User profile section&quot;
  [isBlocked]=&quot;isSaving&quot;&gt;
  &lt;div&gt;Content that can be blocked&lt;/div&gt;
&lt;/eui-block-content&gt;</code></pre></div><b>Example :</b><div><pre class="line-numbers"><code class="language-ts">isLoading = true;

loadData(): void {
  this.isLoading = true;
  this.service.getData().subscribe(() =&gt; {
    this.isLoading = false;
  });
}</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Automatically blurs focused elements when content is blocked</li>
<li>Restores focus to previously focused element when unblocked</li>
<li>Uses ARIA role and label for screen reader context</li>
<li>Prevents keyboard interaction with blocked content</li>
<li>Focus management ensures users don&#39;t interact with disabled content</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Use isBlocked to control blocking state (typically tied to loading/saving states)</li>
<li>Default role is &#39;region&#39;, can be customized via role input</li>
<li>Default ariaLabel is &#39;block content wrapper&#39;, should be customized for context</li>
<li>Focus is automatically saved and restored during block/unblock transitions</li>
<li>Blocked state applies visual styling (typically overlay or disabled appearance)</li>
<li>Commonly used with loading indicators or during async operations</li>
<li>Does not prevent programmatic changes, only user interaction</li>
</ul>


**Selector:** `eui-block-content`

**Standalone:** false

## Inputs

- **ariaLabel**: `string` - <p>ARIA label for the content wrapper</p>

- **isBlocked**: `boolean` - <p>Whether the content is currently blocked
When true, focused elements within will be blurred and state saved</p>

- **role**: `string` - <p>ARIA role for the content wrapper</p>

