Passwort-Feld mit Show/Hide

1<div class="pw-field">
2  <label for="pw-input" class="pw-lab">Passwort</label>
3  <div class="pw-box">
4    <input id="pw-input" class="pw-input" type="password" placeholder="••••••••" autocomplete="new-password" />
5    <button type="button" class="pw-toggle" aria-label="Passwort anzeigen" aria-pressed="false">
6      <svg class="pw-eye" viewBox="0 0 24 24" fill="none" aria-hidden="true">
7        <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z" stroke="currentColor" stroke-width="1.6"/>
8        <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="1.6"/>
9      </svg>
10      <svg class="pw-eye-off" viewBox="0 0 24 24" fill="none" aria-hidden="true">
11        <path d="M3 3l18 18" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
12        <path d="M10.6 6.2A9.7 9.7 0 0 1 12 6c6.5 0 10 6 10 6a17 17 0 0 1-3.2 3.7M6.3 6.4A17 17 0 0 0 2 12s3.5 7 10 7a9.5 9.5 0 0 0 4-.9" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
13      </svg>
14    </button>
15  </div>
16  <div class="pw-meter" aria-hidden="true"><span class="pw-bar"></span></div>
17  <p class="pw-hint" id="pw-hint">Mind. 8 Zeichen empfohlen</p>
18</div>