# EuiDisableContentComponent

**Type:** component



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.

### Basic Usage
```html
<eui-disable-content [isDisabled]="isProcessing">
  <form>
    <!-- Form content -->
  </form>
</eui-disable-content>
```

### With Notification
```html
<eui-disable-content
  [isDisabled]="isSaving"
  [disabledText]="'Please wait while we save your changes'">
  <div class="content-section">
    <!-- Content -->
  </div>
</eui-disable-content>
```

### Conditional Disabling
```typescript
// Component
isFormDisabled = false;

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

// Template
<eui-disable-content [isDisabled]="isFormDisabled">
  <button (click)="submitForm()">Submit</button>
</eui-disable-content>
```

### Accessibility
- Automatically sets `aria-disabled="true"` on focused elements when disabled
- Manages focus state by storing and restoring last active element
- Sets `tabindex="-1"` on disabled elements to prevent keyboard navigation
- Displays growl notification when clicking disabled content (if `disabledText` provided)
- Restores focus to previously active element when re-enabled

### Notes
- Wraps content with `<ng-content/>` for flexible composition
- Requires `EuiGrowlService` for notification functionality
- CSS class `eui-disable-content--disabled` applied when active
- Does not prevent programmatic interaction, only visual and focus management
- Use for temporary disabling; for permanent states, use native `disabled` attribute


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

## Inputs
- **disabledText**: `undefined` - Text to display in an eui-growl (type info) notification when clicking the disabled content.
- **isDisabled**: `boolean, BooleanInput` - Controls whether the content is disabled. If disabled, a semi-transparent overlay with spinner is shown.