密碼輸入欄位 (Password Input)

新提案
→
封閉測試
→
公開測試
→
已穩定

成熟度說明

新提案：未完成開發、請勿使用。
封閉測試：開發暫時性完成，可使用。可能仍有親和力或其他使用上問題待透過實測發現。
公開測試：開發暫時性完成，歡迎使用。具有完整親和力報告。
已穩定：開發完成、歡迎使用。應無任何親和力或使用上問題。

說明

密碼輸入欄位允許用戶輸入密碼，並提供選項顯示他們所輸入的明文密碼。讓使用者能在送出前檢查他們的密碼，幫助他們減少錯誤並選擇安全的密碼。
此元件預設隱藏密碼，使用者可以選擇點擊「顯示」按鈕顯示密碼。由於使用者在輸入或建立密碼時可能不在私人空間，因此應預設隱藏密碼。
「顯示」按鈕，一開始預設關閉，只有當 JavaScript 被執行的時候才會顯示，這樣可以避免關閉 JavaScript 的使用者看到這個無法作用的按鈕。

樣式

密碼

HTML

<div class="password-input" data-password-input-root>
    <label for="password-input">
      密碼
    </label>
    <div class="password-input__wrapper">
      <input class="password-input__input" id="password-input" name="password" type="password"
             spellcheck="false" autocomplete="current-password" autocapitalize="none"
             data-password-input>
      <button type="button"
              class="button button-primary password-input__toggle"
              aria-controls="password-input"
              aria-label="顯示密碼"
              data-password-toggle
              hidden>
        顯示
      </button>
    </div>
</div>

JavaScript

使用 password-input.js。