Toolbar
Beta

FocusTrap

A directive that traps keyboard focus within a container, ensuring proper accessibility for modals, forms, and other interactive elements that require contained navigation.

Import

import {FktFocusTrapDirective} from "frakton-ng/focus-trap";

Basic

Basic focus trap implementation confining keyboard navigation to a specific area.

Try tabbing through the elements below. Focus will be trapped within the container.

Focus Trap Demo

This container traps focus. Use Tab and Shift+Tab to navigate.

This content is outside the focus trap and won't be reachable via Tab navigation.


  
Try tabbing through the elements below. Focus will be trapped within the container.

  
  

    
Focus Trap Demo

    
This container traps focus. Use Tab and Shift+Tab to navigate.

    
    
    
    
  

  
  
This content is outside the focus trap and won't be reachable via Tab navigation.

Focus trap used in modal dialogs to ensure proper keyboard accessibility.

Click the button below to open a dialog using FktDialogService. The Frakton Dialog component automatically includes focus trap functionality.

About Frakton Dialogs

The FktDialogService automatically implements focus trap using the same fktFocusTrap directive demonstrated in other examples. This ensures:

  • Focus is trapped within the dialog content
  • Tab navigation cycles within the dialog
  • Accessibility guidelines are followed
  • No additional setup required

This content remains accessible when no dialog is open.


  

    Click the button below to open a dialog using FktDialogService.
    The Frakton Dialog component automatically includes focus trap functionality.
  


  

  

    
About Frakton Dialogs

    

      The FktDialogService automatically implements focus trap using the same
      fktFocusTrap directive demonstrated in other examples. This ensures:
    

    
    
      
  • Focus is trapped within the dialog content
    • 
      
  • Tab navigation cycles within the dialog
    • 
      
  • Accessibility guidelines are followed
    • 
      
  • No additional setup required
    • 
    

  


  
This content remains accessible when no dialog is open.

Form

Focus trap applied to form elements for sequential keyboard navigation.

This form demonstrates focus trap with various form controls. Tab navigation is contained within the form.

Registration Form

All form controls are included in the focus trap cycle.

Elements outside the form are not accessible via keyboard navigation when focus is trapped.


  
This form demonstrates focus trap with various form controls. Tab navigation is contained within the form.


  

    
Registration Form

    
All form controls are included in the focus trap cycle.


    

      
      
    


    

    

    

    

    

    

      
      
    

  

  
Elements outside the form are not accessible via keyboard navigation when focus is trapped.