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.
<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"
[autofocus]="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>