パスワード要件リストPasswordRequirementListExperimental

パスワード要件の達成状態をチェックリストとして表示します。

プレビュー

状態とバリエーション

達成と未達成

検証結果をアプリ側で計算し、要件ごとに渡します。

  • 12文字以上
  • 数字を含む
  • 記号を含む

未入力

入力前は met を省略して未確認状態にできます。

  • 12文字以上
  • 数字を含む

要件に説明を添える

description を渡すと、要件の下に小さな補足が付きます。「記号」のように受け取り方が分かれる言葉は、ここで具体例まで書きます。

  • 12文字以上空白も1文字として数えます。
  • 記号を含む! @ # $ % & ? が使えます。
  • 前回と同じにしない保存したあとに照合します。

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
requirementsPasswordRequirement[]-表示する要件と達成状態です。
metLabel / unmetLabel / pendingLabelstring-各状態の支援技術向けラベルです。

使い方

import { PasswordRequirementList } from "@gunjo/ui";

export function SignUpPasswordRequirements() {
  return (
    <PasswordRequirementList
      requirements={[
        { id: "length", label: "12文字以上", met: true },
        { id: "number", label: "数字を含む", met: true },
        { id: "symbol", label: "記号を含む", met: false },
      ]}
    />
  );
}

設計の判断

  • 満たしたかどうかを、記号と色の両方で出す。チェック・バツ・丸（未入力）の3つのアイコンを使い分け、それぞれに読み上げ用の名前を付けています。緑と赤の色だけで分けると、色を見分けられない人には届きません。
  • 「まだ入力していない」を第3の状態として持つ。met を渡さない項目は保留として灰色の丸になります。入力を始める前から全部が赤いバツで並ぶと、まだ何もしていないのに失敗しているように見えるためです。
  • 判定そのものは部品が持たない。何文字以上か、記号が要るかは呼ぶ側が決めて met に入れます。要件は国やサービスの規定で変わるので、部品には埋め込みませんでした。並びは ul のままで、順序の意味は持たせていません。
    一般のリストの設計は UIXHERO の「リスト」にあります。

使用コンポーネント

PasswordRequirementList

関連コンポーネント

PasswordGroupPasswordStrengthMeterPasswordInput

いつ・なぜ使うか（UIXHERO）

「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。

UIXHERO: リスト（List）近い記事