FloatLabel appears on top of the input field when focused.
import { FloatLabel } from 'primeng/floatlabel';
FloatLabel is used by wrapping the input and its label.
<p-floatlabel>
<input id="username" pInputText [(ngModel)]="value" />
<label for="username">Username</label>
</p-floatlabel>
The variant property defines the position of the label. Default value is over, whereas in and on are the alternatives.
<p-floatlabel variant="in">
<input pInputText id="in_label" [(ngModel)]="value1" autocomplete="off" />
<label for="in_label">In Label</label>
</p-floatlabel>
<p-floatlabel variant="on">
<input pInputText id="on_label" [(ngModel)]="value2" autocomplete="off" />
<label for="on_label">On Label</label>
</p-floatlabel>
When the form element is invalid, the label is also highlighted.
<p-floatlabel>
<input pInputText id="value1" [(ngModel)]="value1" class="ng-dirty ng-invalid" />
<label for="value1">Username</label>
</p-floatlabel>
<p-floatlabel variant="in">
<input pInputText id="value2" [(ngModel)]="value2" class="ng-dirty ng-invalid" />
<label for="value2">Username</label>
</p-floatlabel>
<p-floatlabel variant="on">
<input pInputText id="value3" [(ngModel)]="value3" class="ng-dirty ng-invalid" />
<label for="value3">Username</label>
</p-floatlabel>
FloatLabel does not require any roles and attributes.
Component does not include any interactive elements.