密碼強度輸入框

輸入時即時計算密碼強度（長度、大小寫、數字、符號），4 段色條隨等級逐格點亮，規則清單逐項打勾動畫，並附眼睛按鈕切換明碼顯示，適合註冊與變更密碼表單。

載入預覽⋯

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

欄位標籤label

佔位提示文字placeholder

顯示規則檢查清單showRules

停用輸入disabled

<PasswordStrengthInput />

安裝

npx shadcn@latest add https://webberui.com/r/password-strength-input.json

或在 components.json 設定 registries 後，改用 @webberui/password-strength-input 安裝。

安裝依賴後，從 registry JSON（/r/password-strength-input.json 的 files[0].content）複製 password-strength-input.tsx 原始碼到你的 components/ui/ 目錄：

npm install motion lucide-react clsx tailwind-merge

使用

import { PasswordStrengthInput } from "@/components/ui/password-strength-input";

<PasswordStrengthInput
  label="設定密碼"
  placeholder="輸入至少 8 個字元"
  onValueChange={(value, passedCount) => console.log(value, passedCount)}
/>

自訂規則：

<PasswordStrengthInput
  rules={[
    { id: "length", label: "至少 12 個字元", test: (v) => v.length >= 12 },
    { id: "number", label: "包含數字", test: (v) => /\d/.test(v) },
  ]}
/>

Props

Prop	型別	預設值	說明
`value`	`string`	—	受控模式的目前值，提供後由外部管理輸入內容
`defaultValue`	`string`	`""`	非受控模式的初始值
`onValueChange`	`(value: string, passedCount: number) => void`	—	值變更時的回呼，第二參數為通過的規則數
`rules`	`PasswordRule[]`	長度／大小寫／數字／符號四項	自訂驗證規則清單（`id`、`label`、`test`）
`label`	`string`	`"密碼"`	輸入框上方的欄位標籤文字
`placeholder`	`string`	`"輸入您的密碼"`	輸入框的佔位提示文字
`showRules`	`boolean`	`true`	是否顯示規則檢查清單
`disabled`	`boolean`	`false`	是否停用輸入
`className`	`string`	—	透傳到最外層容器

可及性

強度變化透過 aria-live="polite" 的隱藏區塊即時播報（例如「密碼強度：強」）
顯示切換按鈕具備 aria-label（顯示密碼／隱藏密碼）與 aria-pressed 狀態
欄位標籤以 htmlFor 正確關聯輸入框，並使用 autoComplete="new-password"
每條規則以 aria-label 標示「已符合／未符合」，裝飾性色條與圖示對輔助科技隱藏
使用者系統開啟「減少動態效果」時，色條與打勾動畫改為即時切換，不播放彈簧動畫

密碼強度輸入框

Playground

安裝

使用

Props

可及性

On this page