FloatLabel

FloatLabel appears on top of the input field when focused.

Import#


import { FloatLabel } from 'primereact/floatlabel';

Basic#

FloatLabel is used by wrapping the input and its label.

Username


<FloatLabel>
    <InputText id="username" value={value} onChange={(e) => setValue(e.target.value)} />
    <label htmlFor="username">Username</label>
</FloatLabel>

Accessibility#

Screen Reader

FloatLabel does not require any roles and attributes.

Keyboard Support

Component does not include any interactive elements.