> ## Documentation Index
> Fetch the complete documentation index at: https://docs-dev-feat-update-styling-docs-for-universal-components.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# ノードとコンポーネント
> フォームノードと使用可能なコンポーネントについて説明します。
フォームは、ノードと、フィールド、ブロック、ウィジェットなどのコンポーネントを追加して、ユーザーがフォームを操作できるようにします。その後、フォームやフローでコンポーネントからのデータ入力を参照できます。
## フォームノード
フォームノードには開始、ステップ、フロー、経路、終了画面の5種類があります。これらのノードは、フォームの構造に対して非常に明確な目的があります。
## ステップノード
ステップノードではフォームを視覚的に確認できます。ユーザーがデータを入力できるフィールド、ブロック、およびウィジェットなど、複数のコンポーネントを含むことができます。
### フィールドコンポーネント
フィールドは、ユーザーがフォームに情報を入力するUIコンポーネントです。
#### フィールド設定
フィールドには、要件を満たすために構成できるデフォルト設定がいくつかあります。
デフォルトのフィールド設定は次のとおりです。
| 設定 | 説明 |
| ------------------------------ | ------------------ |
| ID | 一意のID |
| Label（ラベル） | ラベルを表示または非表示にします |
| Required（必須） | 入力値が必須です |
| Hint text（ヒントテキスト） | ヒントテキストを表示します |
| Placeholder text（プレースホルダーテキスト） | ユーザーに表示されるテキスト |
| Default value（デフォルト値） | ユーザーに表示されるデフォルト値 |
| Transient（一時的） | データマスクを有効または無効にします |
#### フィールド検証ルール
| 設定 | 説明 |
| ---------------------------------- | ------------ |
| Min. length / Max. length（最小長/最大長） | 入力値の長さを指定する。 |
| Min. value / Max. value（最小値/最大値） | 数値の長さを指定する。 |
#### フォームで使用可能なフィールド
特定の設定とデータ出力タイプを持つ使用可能なフィールドは次のとおりです。
任意の文字列値を入力できる標準入力。
##### テキストフィールドの設定
テキストフィールドは以下のように設定されています。
| 設定 | 説明 |
| -------------- | ----------------- |
| Multiline（複数行） | 複数行のテキスト入力を有効にする。 |
##### テキストフィールドの出力値
テキストフィールドの出力値のデータ型は`string`です。
```json lines theme={null}
{
"text_field_id": "Auth0"
}
```
メール文字列値を入力できる標準入力。
##### メールフィールドの出力値
メールフィールドの出力値のデータ型は`string`です。
```json lines theme={null}
{
"email_field_id": "username@domain.com"
}
```
電話番号の値を入力できる標準入力。
##### 電話フィールドの設定
電話フィールドは以下のように設定されています。
| 設定 | 説明 |
| ------------------------------------------ | -------------------------------------------- |
| Country picker（国ピッカー） | 国ピッカーを有効または無効にします。デフォルトでは、ユーザーのIPの場所が表示されます。 |
| Filter placeholder text（フィルタープレースホルダーテキスト） | 国の検索ウィンドウでユーザーに表示されるテキスト。 |
##### 電話フィールドの出力値
電話フィールドの出力値のデータ型は`string`か、国ピッカーが有効な場合は`object`です。
`string`の電話フィールド出力のデータ型の値：
```json lines theme={null}
{
"phone_field_id": "8005550175"
}
```
`object`の電話フィールド出力のデータ型の値：
```json lines theme={null}
{
"phone_field_id": {
"national_number": "8005550175",
"national_format": "(800) 555-0175",
"international_number": "+18005550175",
"international_format": "+1 800-555-0175",
"country_code_iso": "US",
"country_code_number": "1"
}
}
```
単一または複数選択する値を選択できる標準入力。
##### 選択フィールドの設定
選択フィールドは以下のように設定されています。
| 設定 | 説明 |
| ------------------------------------- | -------------------------- |
| Multiple choice（複数選択） | 複数の選択肢を有効にします。 |
| Other option（その他のオプション） | ユーザーが自分のオプションを入力できるようにします。 |
| Advanced（高度な設定）> Internal values（内部値） | 各選択肢に内部値を割り当てます。 |
| Advanced（高度な設定）> Bulk edit（一括編集） | ラベルと内部選択肢の値を一括編集します。 |
##### 選択フィールドの出力値
選択フィールドの出力値のデータ型は`string`か、複数選択が有効な場合は`array of strings`です。
`string`の選択フィールドの出力データ型の値：
```json lines theme={null}
{
"choice_field_id": "Option A"
}
```
`array of strings`の選択フィールドの出力データ型の値：
```json lines theme={null}
{
"choice_field_id": ["Option A", "Option B"]
}
```
単一または複数選択する画像値を選択できる標準入力。
##### カードフィールドの設定
カードフィールドは以下のように設定されています。
| 設定 | 説明 |
| ------------------------------------- | --------------- |
| Multiple choice（複数選択） | 複数の選択肢を有効にする。 |
| Hide labels（ラベルを非表示） | カードラベルを非表示にする。 |
| Advanced（詳細設定） > Internal values（内部値） | 各選択肢に内部値を割り当てる。 |
##### カードフィールドの出力値
カードフィールドの出力値のデータ型は`string`か、複数選択が有効な場合は`array of strings`です。
`string`のカードフィールドの出力データ型の値：
```json lines theme={null}
{
"card_field_id": "Option A"
}
```
`array of strings`のカードフィールドの出力データ型の値：
```json lines theme={null}
{
"card_field_id": ["Option A", "Option B"]
}
```
URL値を入力できる標準入力。
##### URLフィールドの出力値
URLフィールド出力値のデータ型は文字列です：
```json lines theme={null}
{
"url_field_id": "https://auth0.com"
}
```
パスワードまたはシークレット値を入力できる標準入力。
##### パスワードフィールドの設定
パスワードフィールドは以下のように設定されています。
| 設定 | 説明 |
| ------------- | ------------------------------------------------------------------------------- |
| 複雑なパスワードが必要 | パスワードには大文字・小文字、記号、数字を含める必要があります。 |
| NISTガイドラインの強制 | パスワードは8文字以上で指定し、以前に侵害されたパスワードや辞書に記載されている単語、繰り返しや連続した文字、コンテンツ固有の単語を使用することはできません。 |
| 強度メーターの追加 | 入力したパスワードの強度を示すために、パスワードフィールドの下に赤色、黄色、緑色のスケールで示されたメーターが表示されます。 |
| ハッシュ | 入力値をブラウザーに直接ハッシュするためのアルゴリズムを選択します。 |
##### パスワードフィールドの出力値
パスワードフィールドの出力値のデータ型はマスクされた`string`です。
```json lines theme={null}
{
"password_field_id": "███"
}
```
決済プロバイダーを使用して支払い情報を入力できる標準入力。支払いは終了ノードの前に処理されます。
##### 支払いフィールドの設定
支払いフィールドは以下のように設定されています。
| 設定 | 説明 |
| --------------------------------- | -------------------------------------------- |
| Payment type（支払いタイプ） | 1回限り（チャージ）または継続払い（サブスクリプション）のいずれかを選択します。 |
| Amount（金額） | 1回限り（チャージ）の支払い額を指定します。 |
| Currency（通貨） | 1回限り（チャージ）の支払い通貨を指定します。 |
| Subscription action（サブスクリプションの操作） | 新規作成するか既存のサブスクリプションを更新するかを選択します。 |
| Customer action（顧客の操作） | 新規作成するか既存の顧客を更新するかを選択します。 |
| Display options（表示オプション） | カード番号、有効期限、セキュリティコードラベル、およびトラストマークを表示・編集します。 |
##### 支払いフィールドの出力値
支払いフィールドの出力値のデータ型は、サブミッションフロー後は文字列かオブジェクトです。
`string`の支払いフィールド出力値のデータ型：
```json lines theme={null}
{
"payment_field_id": "pm_1P19e..."
}
```
`object`の支払いフィールド出力値のサブスクリプションのデータ型：
```json lines theme={null}
{
"payment_field_id": {
"payment_method_id": "pm_1P19e...",
"customer_id": "cus_PqrM...",
"price_ids": [
"price_1ONHR..."
],
"subscription_id": "sub_1P1A...",
"payment_intent_id": "pi_3P19e5..."
}
}
```
`object`の支払いフィールド出力値の請求のデータ型：
```json lines theme={null}
{
"payment_field_id": {
"payment_method_id": "pm_1P19e...",
"customer_id": "cus_PqrM...",
"amount": 100,
"payment_intent_id": "pi_3P19e5..."
}
}
```
法律テキストとチェック入力を追加する標準入力。
##### 法律フィールドの出力値
法律フィールド出力値のデータ型は`boolean`です。
```json lines theme={null}
{
"legal_field_id": true
}
```
単一または複数のドロップダウン選択値を選択できる標準入力。
##### ドロップダウンフィールドの設定
ドロップダウンフィールドは以下のように設定されています。
| 設定 | 説明 |
| --------------------------------------- | ------------------- |
| Multiple selector（複数セレクター） | 複数の選択肢を有効にします。 |
| Advanced（高度な設定） > Internal values（内部の値） | 各オプションに内部の値を割り当てます。 |
| Advanced（高度な設定） > Bulk edit（一括編集） | ラベルと内部の値を一括編集します。 |
##### ドロップダウンフィールドの出力値
ドロップダウンフィールドの出力値のデータ型は`string`か、複数選択が有効な場合は`array of strings`です。
`string`のドロップダウンフィールド出力のデータ型の値：
```json lines theme={null}
{
"dropdown_field_id": "Option A"
}
```
`array of strings`のドロップダウンフィールド出力のデータ型の値：
```json lines theme={null}
{
"dropdown_field_id": ["Option A", "Option B"]
}
```
数値を入力できる標準入力。
##### 数字フィールドの出力値
数字フィールドの出力値のデータ型は`number`です。
```json lines theme={null}
{
"number_field_id": 123
}
```
日付または時刻の値を入力できる標準入力。
##### 日付/時刻フィールドの設定
日付/時刻フィールドの設定：
| キー | 説明 |
| ---------- | ---------------- |
| Format（形式） | 日付または時間の形式を選択する。 |
##### 日付/時刻フィールドの出力値
日付/時刻フィールド出力の日付のデータ型の値は`string`です：
```json lines theme={null}
{
"date_time_field_id": "2023-04-11"
}
```
日付/時刻フィールド出力の時刻のデータ型の値は`string`です：
```json lines theme={null}
{
"date_time_field_id": "23:15"
}
```
trueまたはfalseの値を入力できる標準入力。
##### ブール値フィールドの出力値
ブール値フィールドの出力値データ型はブール値です。
```json lines theme={null}
{
"boolean_field_id": true
}
```
カスタマイズして独自のフィールドを作成できる標準フィールド。
##### カスタムフィールドの設定
カスタムフィールドの設定は次のとおりです。
| 設定 | 説明 |
| -------- | --------------------------------------------------------------------- |
| パラメーター | カスタムフィールドのソースコードで参照するキーと値のペアを追加します。 |
| ソースコード | カスタムフィールドにJavascriptコードを追加します。 |
| JSONスキーマ | デフォルトでは、カスタムフィールドはあらゆる値のフォーマットを受け入れます。ただし、JSONスキーマを使用して値を検証することができます。 |
詳細については、[フォームのカスタムフィールドのコンポーネント](/docs/ja-jp/customize/forms/custom-field-components)をお読みください。
### ブロックコンポーネント
ブロックは、ユーザー情報を収集せずにフォームに機能を追加するUIコンポーネントです。
#### フォームで使用可能なブロック
使用可能なブロックは次のとおりです。
次のフォームノードに進めるボタン。
* 続行する前に、フィールド検証ルールが適用され、クライアント側とサーバー側で検証されます。フィールド検証ルールが失敗した場合は、ユーザーが確認できるように、エラーメッセージが表示されます。
* 次のノードがフローノードである場合は、フローが完了するまでスピナーが表示されます。フローが失敗した場合やカスタムエラーメッセージが返された場合には、エラーメッセージが表示されます。
前のステップノードに移動できるボタン。
ユーザーが戻るボタンを選択すると、入力データに変更がない場合でも、続行する前にフィールド検証ルールが再実行されます。
現在のステップをスキップして、宛先ノードに直接ジャンプできるボタン。
現在のステップをスキップすると、検証が行われず、現在のステップで入力された情報が収集されません。
A component that lets users re-run a flow to generate and send a new OTP code
if a user selects the resend button, the associated flow will generate and send a new OTP code.
| Settings | Description |
| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Text alignment | Select text alignment, left, center, or right |
| Text | Default text displayed when users select the resend button |
| Button text | Button text |
| Waiting text | Text displayed when users have selected the resend button. Replaces `Text` and the `Button text` settings. Use the `“{{remaining_seconds}}”` variable to dynamically display the remaining number of seconds until the send button is enabled again. For example: “Resend in `{{remaining_seconds}}` seconds”. |
| Flow | Flow executed after the user selects the resend button. |
| Max attempts | The maximum number of attempts the user can select the resend button |
| Waiting time | The waiting time between attempts in seconds. |
追加情報を使用してステップノードをパーソナライズするリッチテキストブロック。
ステップノードの異なるセクションを仕切る線。小さなテキストを含めることができます。
カスタムUIを作成するためのHTMLブロック。
画像を追加するステップをパーソナライズするための画像ブロック。
### ウィジェットのコンポーネント
ウィジェットは、サードパーティ統合が含まれた事前構築されたコンポーネントで、クライアント側とサーバー側のロジックをフォームに追加します。
#### フォームで使用可能なウィジェット
使用可能なウィジェットは次のとおりです。
住所を入力して検証できるウィジェット。
##### Google Addressウィジェットの設定
Google Addressウィジェットは以下のように設定されています。
| 設定 | 説明 |
| -------------- | ----------------------------- |
| API key（APIキー） | 要求の認証にGoogle MapsのAPIキーを要求する。 |
##### Google Addressウィジェットの出力値
Google Addressウィジェットの出力値のデータ型は`object`です。
```json lines theme={null}
{
"google_address_widget_id": {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-73.9654415,
40.8054491
]
},
"properties": {
"geocoding": {
"type": "house",
"housenumber": "2880",
"street": "Broadway",
"city": "New York",
"county": "New York County",
"state": "New York",
"country": "United States",
"postcode": "10025"
}
}
}
}
```
A widget that helps protect your website from spam and abuse by verifying that a user is a human and not a bot.
The widget supports:
* Score-based (v3)
* Challenge (v2)
* Invisible reCAPTCHA badge
Differences between `v2` and `v3`:
* `v2` requires user interaction with visible challenges, such as clicking a checkbox or solving puzzles.
* `v3` runs in the background and provides a score based on user behavior, without requiring user interaction. When using this version, make sure to implement additional business logic to handle the score and determine if further action is needed.
##### Google reCAPTCHA widget settings
The Google reCAPTCHA widget settings include:
| Settings | Description |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Site key | The public site key used to initialize the reCAPTCHA on your website. You can create it in [Google reCAPTCHA console](https://www.google.com/recaptcha/admin/create) or your Google Cloud Platform project. |
| Secret key | The secret key used to communicate securely with the reCAPTCHA service server-side. You can create it in [Google reCAPTCHA console](https://www.google.com/recaptcha/admin/create) or your Google Cloud Platform project. |
##### Google reCAPTCHA output value
The Google reCAPTCHA widget output value data type is an `object`.
Example of `v2` response:
```json lines theme={null}
{
"recaptcha_widget_id": {
"success": true,
"challenge_ts": "2025-03-26T11:22:18Z",
"hostname": "auth.example.com"
}
}
```
Example of `v3` response:
```json lines theme={null}
{
"recaptcha_widget_id": {
"success": true,
"challenge_ts": "2025-03-26T11:22:18Z",
"hostname": "auth.example.com",
"score": 0.9
}
}
```
A widget that lets a user verify their identity using verifiable credentials stored in their digital wallet.
##### Verifiable Credentials widget settings
The Verifiable Credentials widget settings include:
| Settings | Description |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| URL | The URL value used to generate the QR code. This value is returned in the `engagement` property of the verification request. |
| Link text | Alternative text that will be displayed for users who cannot scan the QR code and prefer to open the link directly on their device. |
| Size | The size of the QR code. |
| Public token | The access token required to consume the polling endpoint. Please ensure the token is generated with only the `read:verification_request` scope to avoid exposing access to other resources. |
| Verification ID | The verification ID generated when you start the verification request. |
| Maximum waiting time | The maximum amount of time to wait for the verification process to complete. Once the set time is reached, polling will stop and an error will be thrown, regardless of the verification status. |
##### Verifiable Credentials output value
The Verifiable Credentials widget output value data type is an `object`.
```json lines theme={null}
{
"verifiable_credentials_widget_id": {
"state": "honored",
"reason": "...", // The reason field contains additional information (if available) regarding the state of the verification request.
"presentation": {} // The presentation contains the claims provided by the wallet in response to the presentation definition.
}
}
```
## 経路ノード
経路ノードを使用すると、ノード間で条件付きロジックジャンプを作成するためのルールを追加できます。
デフォルトで、経路ノードには **Default Case（デフォルトケース）** という名前の単一パススルールールがあり、他のノードに接続します。変数が他のノードに接続するために満たさなければならない一連の条件に基づいて、追加のルールを追加することができます。詳細については、「[経路](/docs/ja-jp/customize/forms/routers)」をお読みください。
## フローノード
フローノードを使用すると、フォームにカスタムロジックと統合フローを追加および作成することができます。詳細については、「[フロー](/docs/ja-jp/customize/forms/flows)」をお読みください。
## 開始ノード
開始ノードはユーザーには表示されません。ここには、[アクションを持つフォームを表示する](/docs/ja-jp/customize/forms/render)際のユーザー属性など、隠しフィールド変数を構成することができます。
## 終了スクリーンノード
すべてのフォームに終了スクリーンノードがあります。デフォルトでは、このノードは認証フローを再開し、ここで送信後のフローを構成することができます。
