# EuiBlockContentComponent

**Type:** component



Component that wraps content and manages focus state when content is blocked.
Provides accessibility attributes and handles focus restoration when blocking/unblocking.

#### Basic blocked content
```html
<eui-block-content [isBlocked]="isLoading">
  <form>
    <input type="text" />
    <button>Submit</button>
  </form>
</eui-block-content>
```

#### With custom ARIA attributes
```html
<eui-block-content
  role="region"
  ariaLabel="User profile section"
  [isBlocked]="isSaving">
  <div>Content that can be blocked</div>
</eui-block-content>
```

```ts
isLoading = true;

loadData(): void {
  this.isLoading = true;
  this.service.getData().subscribe(() => {
    this.isLoading = false;
  });
}
```

### Accessibility
- Automatically blurs focused elements when content is blocked
- Restores focus to previously focused element when unblocked
- Uses ARIA role and label for screen reader context
- Prevents keyboard interaction with blocked content
- Focus management ensures users don't interact with disabled content

### Notes
- Use isBlocked to control blocking state (typically tied to loading/saving states)
- Default role is 'region', can be customized via role input
- Default ariaLabel is 'block content wrapper', should be customized for context
- Focus is automatically saved and restored during block/unblock transitions
- Blocked state applies visual styling (typically overlay or disabled appearance)
- Commonly used with loading indicators or during async operations
- Does not prevent programmatic changes, only user interaction


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

## Inputs
- **ariaLabel**: `string` - ARIA label for the content wrapper
- **isBlocked**: `undefined` - Whether the content is currently blocked When true, focused elements within will be blurred and state saved
- **role**: `string` - ARIA role for the content wrapper