パスワード要件リストPasswordRequirementListExperimental
パスワード要件の達成状態をチェックリストとして表示します。
プレビュー
状態とバリエーション
達成と未達成
検証結果をアプリ側で計算し、要件ごとに渡します。
未入力
入力前は met を省略して未確認状態にできます。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| requirements | PasswordRequirement[] | - | 表示する要件と達成状態です。 |
| metLabel / unmetLabel / pendingLabel | string | - | 各状態の支援技術向けラベルです。 |
使い方
import { PasswordRequirementList } from "@gunjo/ui";
export function PasswordRequirementListDemo() {
return (
<PasswordRequirementList
requirements={[
{ id: "length", label: "12文字以上", met: true },
{ id: "number", label: "数字を含む", met: true },
{ id: "symbol", label: "記号を含む", met: false },
]}
/>
);
}