パスワード強度メーターPasswordStrengthMeterExperimental
アプリ側で計算したパスワード強度を段階表示します。
プレビュー
状態とバリエーション
強い
スコアが高い場合は success 色で表示します。
弱い
スコアが低い場合は destructive 色で注意を示します。
段の数を評価器に合わせる
maxScore が段の数になります。0〜3 の3段で返す評価器なら maxScore={3} にして、満点が満タンで揃うようにします。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| score | number | - | アプリ側で計算した強度スコアです。 |
| maxScore | number | 4 | 最大スコアです。セグメント数にも使われます。 |
| label / valueLabel / description | ReactNode | - | メーターの名前、現在の評価、補足文です。 |
使い方
import { PasswordStrengthMeter } from "@gunjo/ui";
export function StrongPasswordStrengthMeter() {
return (
<PasswordStrengthMeter
score={3}
label="パスワード強度"
valueLabel="強い"
description="評価ロジックはアプリ側で計算します。"
/>
);
}