# Password field · MIAN

A password input with a show/hide toggle and an optional four-step strength meter.

- Id: `password-input` · Category: Forms · Needs mian.js: yes · License: MIAN License (free to use)
- Docs: https://mian.ro/components/password-input
- Use for: password field, show password, password strength, new password.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>
```

## Classes

- `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.

## Examples

### With strength meter

```html
<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>
```

## Source

Already inside mian.css and mian.js; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/password-input/source