Password field
A password input with a show/hide toggle and an optional four-step strength meter.
With strength meter
<div class="mn-field" style="max-width:22rem">
<label class="mn-label" for="pw-1">New password</label>
<div class="mn-input-group mn-password">
<input class="mn-input" id="pw-1" type="password" autocomplete="new-password" value="noodles">
<button class="mn-password-toggle" type="button" aria-label="Show password" aria-pressed="false"><span class="mn-password-show"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z"/><circle cx="12" cy="12" r="3"/></svg></span><span class="mn-password-hide"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3l18 18"/><path d="M10.6 5.1A10.4 10.4 0 0 1 12 5c6.5 0 10 7 10 7a17.6 17.6 0 0 1-3.2 4.2M6.6 6.6C3.8 8.4 2 12 2 12s3.5 7 10 7a9.7 9.7 0 0 0 5.4-1.6"/><path d="M9.9 9.9a3 3 0 0 0 4.2 4.2"/></svg></span></button>
</div>
<div class="mn-password-meter" data-mn-for="#pw-1"><i></i><i></i><i></i><i></i><span></span></div>
</div>Installation
Everything ships in one stylesheet and one small script. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>Prefer to own the files? /r/password-input.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-password | Add to an mn-input-group that holds the input and the toggle. |
| mn-password-toggle | The show/hide button. Put both icons inside: .mn-password-show and .mn-password-hide. |
| mn-password-meter[data-mn-for="#id"] | Four <i> segments and a <span> for the label. |
Accessibility
- The toggle is a real button with a fixed label (“Show password”); aria-pressed="true" says the password is visible.
- The strength label is linked with aria-describedby and announced politely as it changes. Colour is never the only signal.
- Use autocomplete="new-password" for sign-up and "current-password" for sign-in.