Focus Trap

Focus Trap keeps focus within a certain DOM element while tabbing.

Import #


import { FocusTrapModule } from 'primeng/focustrap';

Basic #

FocusTrap is applied to a container element with the pFocusTrap directive.

Input

Float Label

Username

Disabled Input

Input with tabindex -1

Button

Dropdown



<div pFocusTrap class="card flex align-items-center justify-content-center flex-wrap gap-3">
    <div>
        <h4>Input</h4>
        <input id="input" type="text" size="30" pInputText>
    </div>
    <div>
        <h4>Float Label</h4>
        <span class="p-float-label">
            <input id="float-input" type="text" size="30" pInputText> 
            <label for="float-input">Username</label>
        </span>
    </div>
</div>

Focus Trap API

API defines helper props, events and others for the PrimeNG Focus Trap module.

Properties #

Name	Type	Default	Description
pFocusTrapDisabled	boolean	false	When set as true, focus wouldn't be managed.