密碼輸入欄位 (Password Input)

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

成熟度說明

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

說明

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

樣式

密碼

HTML

<div class="govuk-form-group govuk-password-input" data-module="govuk-password-input">
    <label class="govuk-label" for="password-input">
      密碼
    </label>
    <div class="govuk-input__wrapper govuk-password-input__wrapper flex flex-wrap">
      <input class="govuk-input govuk-password-input__input govuk-js-password-input-input" id="password-input" name="password" type="password" spellcheck="false" autocomplete="current-password" autocapitalize="none">
      <button type="button" class="button button-primary govuk-password-input__toggle govuk-js-password-input-toggle" data-module="govuk-button" aria-controls="password-input" aria-label="Show password" hidden>
        顯示
      </button>
    </div>
</div>

<script src="https://guide.nics.nat.gov.tw/assets/js/util/govuk/components/password-input/index.js" type="module"></script>

<!-- /Users/nonumpa/guide_test/assets/js/util/govuk/components/password-input/password-input.mjs -->