Floating Labels

Material-style labels that float above the input on focus or when the field has a value. Wrap the input and label together in .lp-form-floating — the trigger is the native :placeholder-shown pseudo-class, so always include a non-empty placeholder attribute (even if it's just a space).

Basic

Full name

Email address

Password

<div class="lp-form-floating lp-mb-3">
    <input type="text" class="lp-input" id="fl-name" placeholder=" " />
    <label for="fl-name">Full name</label>
</div>
<div class="lp-form-floating lp-mb-3">
    <input type="email" class="lp-input" id="fl-email" placeholder=" " />
    <label for="fl-email">Email address</label>
</div>
<div class="lp-form-floating lp-mb-0">
    <input type="password" class="lp-input" id="fl-password" placeholder=" " />
    <label for="fl-password">Password</label>
</div>

Pre-filled

Full name

Email address

<div class="lp-form-floating lp-mb-3">
    <input type="text" class="lp-input" id="fl-prefilled" placeholder=" " value="Jane Doe" />
    <label for="fl-prefilled">Full name</label>
</div>
<div class="lp-form-floating lp-mb-0">
    <input type="email" class="lp-input" id="fl-pref-email" placeholder=" " value="jane@example.com" />
    <label for="fl-pref-email">Email address</label>
</div>

Textarea with floating label

Short bio

<div class="lp-form-floating lp-mb-0">
    <textarea class="lp-textarea" id="fl-bio" placeholder=" " rows="4"></textarea>
    <label for="fl-bio">Short bio</label>
</div>

Native select with floating label

Country

<div class="lp-form-floating lp-mb-0">
    <select class="lp-select-native" id="fl-select">
        <option value=""></option>
        <option value="us">United States</option>
        <option value="gb">United Kingdom</option>
        <option value="de">Germany</option>
        <option value="fr">France</option>
    </select>
    <label for="fl-select">Country</label>
</div>

Disabled / readonly

Disabled

Readonly

<div class="lp-form-floating lp-mb-3">
    <input type="text" class="lp-input" id="fl-disabled" placeholder=" " value="Cannot edit" disabled />
    <label for="fl-disabled">Disabled</label>
</div>
<div class="lp-form-floating lp-mb-0">
    <input type="text" class="lp-input" id="fl-readonly" placeholder=" " value="Read only" readonly />
    <label for="fl-readonly">Readonly</label>
</div>

CSS reference

Class	Purpose
`.lp-form-floating`	Wrapper that gives the label floating behavior. Contains a `.lp-input`/`.lp-textarea`/`.lp-select-native` followed by a `<label>`.

Remember: the input must have a placeholder attribute (a single space " " is fine) for the floating animation to trigger.