Source: https://primereact.org/floatlabel/

Introducing PrimeReact v11 Alpha 🥁Learn More

• SearchK

• 10.9.7

  • v11(11.0.0)

  • v10(10.9.7)

  • v9(9.6.3)

• FEATURES

• API

• THEMING

• PASS THROUGH

FloatLabel

FloatLabel appears on top of the input field when focused.

Import#

---

import { FloatLabel } from 'primereact/floatlabel';
         

Copy

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>
         

Copy

Accessibility#

---

Screen Reader

FloatLabel does not require any roles and attributes.

Keyboard Support

Component does not include any interactive elements.

• Import

• Basic

• Accessibility

PrimeReact 10.9.7 by PrimeTek