Source: https://primeng.org/focustrap

• Primary

  Surface

  PresetsAuraMaterialLaraNora

  Ripple

  RTL

• v20

  • v20

  • v19

  • v18

  • v17

• FEATURES

• API

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.

I agree to the terms and conditions.

Submit

<div pFocusTrap class="w-full sm:w-80 flex flex-col gap-6"> <p-iconfield> <p-inputicon> <i class="pi pi-user"></i> </p-inputicon> <input type="text" pInputText id="input" [(ngModel)]="name" type="text" placeholder="Name" [pAutoFocus]="true" [fluid]="true" /> </p-iconfield>

    <p-iconfield>
        <p-inputicon>
            <i class="pi pi-envelope"> </i>
        </p-inputicon>
        <input type="text" pInputText id="email" [(ngModel)]="email" type="email" placeholder="Email" [fluid]="true" />
    </p-iconfield>

    <div class="flex items-center gap-2">
        <p-checkbox id="accept" [(ngModel)]="accept" name="accept" value="Accept" />
        <label for="accept">I agree to the terms and conditions.</label>
    </div>

    <p-button type="submit" label="Submit" class="mt-2" styleClass="w-full" />
</div>

• Import

• Basic

PrimeBlocks

490+ ready to use UI blocks crafted with PrimeNG and Tailwind CSS.

PrimeNG 20.3.0 by PrimeTek