Floating Label
An input label that smoothly floats upward when the field receives focus or contains text. A polished form pattern that saves space and provides clear context for each input.
Generated using Grepped's AI UI component generator — created from scratch, not pulled from a library.
labelinputfloatfocusform
Live Preview — customize or regenerate this in the workspace
Loading preview…
Design Intent
An input label that smoothly floats upward when the field receives focus.
CSS
css
.field { position: relative; width: 280px; }
.field input { width: 100%; padding: 16px 12px 8px; font-size: 16px; border: 2px solid #3f3f46; border-radius: 8px; background: #18181b; color: #fff; outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
.field input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px #3b82f633; }
.field label { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #71717a; pointer-events: none; transition: all 0.2s ease; }
.field input:focus + label, .field input:not(:placeholder-shown) + label { top: 8px; transform: translateY(0); font-size: 11px; color: #3b82f6; }
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }HTML
html
<div class="field"><input type="text" placeholder=" " id="i"/><label for="i">Email</label></div>Full Source
html
<!DOCTYPE html>
<html><head><style>
.field { position: relative; width: 280px; }
.field input { width: 100%; padding: 16px 12px 8px; font-size: 16px; border: 2px solid #3f3f46; border-radius: 8px; background: #18181b; color: #fff; outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
.field input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px #3b82f633; }
.field label { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #71717a; pointer-events: none; transition: all 0.2s ease; }
.field input:focus + label, .field input:not(:placeholder-shown) + label { top: 8px; transform: translateY(0); font-size: 11px; color: #3b82f6; }
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }
</style></head><body>
<div class="field"><input type="text" placeholder=" " id="i"/><label for="i">Email</label></div>
</body></html>