フォーム入力
パスワード表示切替
目のアイコンをクリックするとパスワードの表示・非表示を切り替えられる。入力ミスを確認しやすい。
プレビュー
入力
操作実際に入力して試せます。
コード（コピーして使えます）
<div class="pw-wrap">
<label class="pw-label" for="pw-input">パスワード</label>
<div class="pw-field">
<input
id="pw-input"
class="pw-input"
type="password"
value="MySecret123"
autocomplete="current-password"
/>
<button class="pw-toggle" id="pw-btn" type="button" aria-label="パスワードを表示">
<svg class="eye-icon" id="eye-on" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
<svg class="eye-icon" id="eye-off" style="display:none" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/><path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
</button>
</div>
<p class="pw-hint">ボタンで表示/非表示を切替</p>
</div>