FloatLabel

    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>
    
    

    Screen Reader

    FloatLabel does not require any roles and attributes.

    Keyboard Support

    Component does not include any interactive elements.