Open experiment
Floating label email field
A polished email primitive powered entirely by native input state and CSS. The label floats without disappearing, email keyboards and autocomplete stay intact, and valid or invalid states use both iconography and explanatory copy.
Lab tested Responsive Dark mode
- Version
- 1.0.0
- Updated
- 2026-08-02
- Dependencies
- Zero
<label class="cmp-floating-email" for="cmp-floating-email-input">
<input
id="cmp-floating-email-input"
type="email"
placeholder=" "
autocomplete="email"
required
aria-describedby="cmp-floating-email-hint"
/>
<span class="cmp-floating-email__label">Email address</span>
<i aria-hidden="true"></i>
<small id="cmp-floating-email-hint">We’ll send the build link here.</small>
</label>
No runtime reactions detected Open in Editor
Validated in the lab
Experiment report
- Schema and source files passed
- Responsive test passed
- Keyboard test passed
- No console errors
Component ingredients
- Dependencies
- None
- Browser support
- Current Chrome, Current Edge, Current Firefox, Current Safari
- Version
- 1.0.0
- Last tested
- 2026-08-02
Accessibility notes
- The visible label is explicitly associated with the email input.
- Native email validation and autocomplete remain intact.
- Invalid guidance is readable text and not color alone.
License: MIT License for open-source use, modification, and distribution.