Focus Trap

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


import { FocusTrapModule } from 'primeng/focustrap';

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

Input

Float Label

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>