パスワードグループPasswordGroupExperimental
パスワード入力、要件、強度、エラー、無効化理由を1つの入力グループとして扱います。
プレビュー
状態とバリエーション
要件と強度付き
パスワード入力、要件、強度を1つの field として扱います。
無効化理由付き
変更できない理由をツールチップで伝えます。
サーバーに弾かれたとき
requirements は「何が足りないか」、error は「送った結果どうだったか」です。役割が違うので同時に出ます。error は入力欄の下、要件リストのさらに下に置かれます。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| value / defaultValue / onValueChange | string / (value) => void | - | パスワード値の制御または初期値です。 |
| requirements | PasswordRequirement[] | - | 表示する要件リストです。検証はアプリ側で行います。 |
| strengthScore | number | - | 強度メーターに渡すスコアです。 |
| disabledReason | ReactNode | - | 無効化理由としてツールチップに表示します。 |
使い方
import * as React from "react";
import { PasswordGroup } from "@gunjo/ui";
export function NewPasswordGroupField() {
const [value, setValue] = React.useState("GunjoUI2026");
return (
<PasswordGroup
value={value}
onValueChange={setValue}
label="新しいパスワード"
strengthScore={3}
strengthLabel="パスワード強度"
strengthValueLabel="強い"
requirements={[
{
id: "length",
label: "12文字以上",
met: value.length >= 12,
},
{
id: "uppercase",
label: "大文字を含む",
met: /[A-Z]/.test(value),
},
{
id: "number",
label: "数字を含む",
met: /\d/.test(value),
},
]}
/>
);
}