Floating labels

The label sits in the field and moves up when you type

Floating labels

The label never disappears, so the field is never a mystery.

Name

Phone

Company

Show the code

<div class="form-grid two w-100">
<div class="field float">
<div class="input">
<input id="fl-0" type="text" placeholder=" " value="Grace Okafor" autocomplete="name">
</div>
<label class="label" for="fl-0">Name</label>
</div>
<div class="field float">
<div class="input">
<input id="fl-1" type="email" placeholder=" " value="grace.okafor@cornerstore.example" autocomplete="email">
</div>
<label class="label" for="fl-1">Email</label>
</div>
<div class="field float">
<div class="input">
<input id="fl-2" type="tel" placeholder=" " autocomplete="tel">
</div>
<label class="label" for="fl-2">Phone</label>
</div>
<div class="field float">
<div class="input">
<input id="fl-3" type="text" placeholder=" " autocomplete="organization">
</div>
<label class="label" for="fl-3">Company</label>
</div>
</div>