パスワードフィールドの強度インジケーターを表示します。
import { Password } from 'primereact/password';
パスワードは、valueプロパティとonChangeプロパティを持つ制御されたコンポーネントとして使用されます。強度メーターはデフォルトで有効になっているため、基本的なパスワード入力の場合はfeedbackをfalseに設定する必要があります。
<Password value={value} onChange={(e) => setValue(e.target.value)} feedback={false} tabIndex={1} />
値が入力されている間、強度メーターはポップアップとして表示されます。
<Password value={value} onChange={(e) => setValue(e.target.value)} />
ラベルは、promptLabel、weakLabel、mediumLabel、strongLabelプロパティによってコンポーネントレベルで翻訳されます。アプリケーション内のすべてのパスワードコンポーネントにグローバル翻訳を適用するには、ロケールAPIを参照してください。
<Password value={value} onChange={(e) => setValue(e.target.value)}
promptLabel="Choose a password" weakLabel="Too simple" mediumLabel="Average complexity" strongLabel="Complex password"/>
toggleMaskが存在する場合、値をプレーンテキストで表示するためのアイコンが表示されます。
<Password value={value} onChange={(e) => setValue(e.target.value)} toggleMask />
カスタムコンテンツは、headerプロパティとfooterプロパティを使用してポップアップ内に配置されます。
<Password value={value} onChange={(e) => setValue(e.target.value)} header={header} footer={footer} />
フォーカス時に、入力フィールドの上にフローティングラベルが表示されます。詳細については、FloatLabelドキュメントをご覧ください。
<FloatLabel>
<Password inputId="password" value={value} onChange={(e) => setValue(e.target.value)} />
<label htmlFor="password">Password</label>
</FloatLabel>
コンポーネントをデフォルトのoutlinedスタイルよりも視覚的に強調して表示するには、variantプロパティをfilledとして指定します。
<Password variant="filled" value={value} onChange={(e) => setValue(e.target.value)} feedback={false} tabIndex={1} />
検証に失敗したことを示すために、invalidプロパティを使用して無効状態が表示されます。フォーム検証ライブラリと統合する場合にこのスタイルを使用できます。
<Password invalid />
disabledが存在する場合、要素は編集およびフォーカスできません。
<Password disabled placeholder="Disabled" />
コンポーネントを説明する値は、idプロパティと組み合わせたlabelタグを使用するか、aria-labelledby、aria-labelプロパティを使用して指定できます。スクリーンリーダーは、入力中にaria-liveを持つセクションを使用して、パスワードの強度の変更に関する通知を受けます。
<label htmlFor="pwd1">Password</label>
<Password id="pwd1" />
<span id="pwd2">Password</span>
<Password aria-labelledby="pwd2" />
<Password aria-label="Password"/>
| キー | 機能 |
|---|---|
| tab | 入力にフォーカスを移動します。 |
| escape | 開いている場合、強度メーターを非表示にします。 |