Open experiment
Liquid password field
A password field that turns abstract strength into a compact liquid reservoir while keeping guidance explicit in text. The native reveal action exposes pressed state, and the strength label updates from actual input length.
Lab tested Responsive Dark mode Interactive
- Version
- 1.0.0
- Updated
- 2026-08-02
- Dependencies
- Zero
<div class="cmp-liquid-password" data-level="empty">
<label for="cmp-liquid-password-input">Create password</label>
<div class="cmp-liquid-password__field">
<input
id="cmp-liquid-password-input"
type="password"
autocomplete="new-password"
placeholder="12+ characters"
/>
<button type="button" aria-pressed="false">Show</button>
</div>
<div class="cmp-liquid-password__meter" aria-hidden="true"><i></i><i></i></div>
<p class="cmp-liquid-password__status" aria-live="polite">Start with 12 or more characters.</p>
</div>
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
- A visible password label is explicitly associated.
- Reveal state is conveyed through aria-pressed and text.
- Strength is described with words as well as color and fill.
License: MIT License for open-source use, modification, and distribution.