パスワードグループPasswordGroupExperimental
パスワード入力、要件、強度、エラー、無効化理由を1つの入力グループとして扱います。
プレビュー
状態とバリエーション
要件と強度付き
パスワード入力、要件、強度を1つの field として扱います。
無効化理由付き
変更できない理由をツールチップで伝えます。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| value / defaultValue / onValueChange | string / (value) => void | - | パスワード値の制御または初期値です。 |
| requirements | PasswordRequirement[] | - | 表示する要件リストです。検証はアプリ側で行います。 |
| strengthScore | number | - | 強度メーターに渡すスコアです。 |
| disabledReason | ReactNode | - | 無効化理由としてツールチップに表示します。 |
使い方
import * as React from "react";
import { PasswordGroup } from "@gunjo/ui";
export function PasswordGroupDemo() {
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) },
]}
/>
);
}