ノードとコンポーネント
フォームは、ノードと、フィールド、ブロック、ウィジェットなどのコンポーネントを追加して、ユーザーがフォームを操作できるようにします。その後、フォームやフローでコンポーネントからのデータ入力を参照できます。
フォームノード
フォームノードには開始、ステップ、フロー、経路、終了画面の5種類があります。これらのノードは、フォームの構造に対して非常に明確な目的があります。

ステップノード
ステップノードではフォームを視覚的に確認できます。ユーザーがデータを入力できるフィールド、ブロック、およびウィジェットなど、複数のコンポーネントを含むことができます。

フィールドコンポーネント
フィールドは、ユーザーがフォームに情報を入力するUIコンポーネントです。

フィールド設定
フィールドには、要件を満たすために構成できるデフォルト設定がいくつかあります。
デフォルトのフィールド設定は次のとおりです。
設定 | 説明 |
---|---|
ID | 一意のID |
Label(ラベル) | ラベルを表示または非表示にします |
Required(必須) | 入力値が必須です |
Hint text(ヒントテキスト) | ヒントテキストを表示します |
Placeholder text(プレースホルダーテキスト) | ユーザーに表示されるテキスト |
Default value(デフォルト値) | ユーザーに表示されるデフォルト値 |
Transient(一時的) | データマスクを有効または無効にします |
フィールド検証ルール
設定 | 説明 |
---|---|
Min. length / Max. length(最小長/最大長) | 入力値の長さを指定する。 |
Min. value / Max. value(最小値/最大値) | 数値の長さを指定する。 |
フォームで使用可能なフィールド
特定の設定とデータ出力タイプを持つ使用可能なフィールドは次のとおりです。
任意の文字列値を入力できる標準入力。
テキストフィールドの設定
テキストフィールドは以下のように設定されています。
設定 | 説明 |
---|---|
Multiline(複数行) | 複数行のテキスト入力を有効にする。 |
テキストフィールドの出力値
テキストフィールドの出力値のデータ型はstring
です。
{
"text_field_id": "Auth0"
}
Was this helpful?
メール文字列値を入力できる標準入力。
メールフィールドの出力値
メールフィールドの出力値のデータ型はstring
です。
{
"email_field_id": "username@domain.com"
}
Was this helpful?
電話番号の値を入力できる標準入力。
電話フィールドの設定
電話フィールドは以下のように設定されています。
設定 | 説明 |
---|---|
Country picker(国ピッカー) | 国ピッカーを有効または無効にします。デフォルトでは、ユーザーのIPの場所が表示されます。 |
Filter placeholder text(フィルタープレースホルダーテキスト) | 国の検索ウィンドウでユーザーに表示されるテキスト。 |
電話フィールドの出力値
電話フィールドの出力値のデータ型はstring
か、国ピッカーが有効な場合はobject
です。
string
の電話フィールド出力のデータ型の値:
{
"phone_field_id": "8005550175"
}
Was this helpful?
object
の電話フィールド出力のデータ型の値:
{
"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"
}
}
Was this helpful?
単一または複数選択する値を選択できる標準入力。
選択フィールドの設定
選択フィールドは以下のように設定されています。
設定 | 説明 |
---|---|
Multiple choice(複数選択) | 複数の選択肢を有効にします。 |
Other option(その他のオプション) | ユーザーが自分のオプションを入力できるようにします。 |
Advanced(高度な設定)> Internal values(内部値) | 各選択肢に内部値を割り当てます。 |
Advanced(高度な設定)> Bulk edit(一括編集) | ラベルと内部選択肢の値を一括編集します。 |
選択フィールドの出力値
選択フィールドの出力値のデータ型はstring
か、複数選択が有効な場合はarray of strings
です。
string
の選択フィールドの出力データ型の値:
{
"choice_field_id": "Option A"
}
Was this helpful?
array of strings
の選択フィールドの出力データ型の値:
{
"choice_field_id": ["Option A", "Option B"]
}
Was this helpful?
単一または複数選択する画像値を選択できる標準入力。
カードフィールドの設定
カードフィールドは以下のように設定されています。
設定 | 説明 |
---|---|
Multiple choice(複数選択) | 複数の選択肢を有効にする。 |
Hide labels(ラベルを非表示) | カードラベルを非表示にする。 |
Advanced(詳細設定) > Internal values(内部値) | 各選択肢に内部値を割り当てる。 |
カードフィールドの出力値
カードフィールドの出力値のデータ型はstring
か、複数選択が有効な場合はarray of strings
です。
string
のカードフィールドの出力データ型の値:
{
"card_field_id": "Option A"
}
Was this helpful?
array of strings
のカードフィールドの出力データ型の値:
{
"card_field_id": ["Option A", "Option B"]
}
Was this helpful?
URL値を入力できる標準入力。
URLフィールドの出力値
URLフィールド出力値のデータ型は文字列です:
{
"url_field_id": "https://auth0.com"
}
Was this helpful?
パスワードまたはシークレット値を入力できる標準入力。
パスワードフィールドの設定
パスワードフィールドは以下のように設定されています。
設定 | 説明 |
---|---|
複雑なパスワードが必要 | パスワードには大文字・小文字、記号、数字を含める必要があります。 |
NISTガイドラインの強制 | パスワードは8文字以上で指定し、以前に侵害されたパスワードや辞書に記載されている単語、繰り返しや連続した文字、コンテンツ固有の単語を使用することはできません。 |
強度メーターの追加 | 入力したパスワードの強度を示すために、パスワードフィールドの下に赤色、黄色、緑色のスケールで示されたメーターが表示されます。 |
ハッシュ | 入力値をブラウザーに直接ハッシュするためのアルゴリズムを選択します。 |
パスワードフィールドの出力値
パスワードフィールドの出力値のデータ型はマスクされたstring
です。
{
"password_field_id": "███"
}
Was this helpful?
決済プロバイダーを使用して支払い情報を入力できる標準入力。支払いは終了ノードの前に処理されます。
支払いフィールドの設定
支払いフィールドは以下のように設定されています。
設定 | 説明 |
---|---|
Payment type(支払いタイプ) | 1回限り(チャージ)または継続払い(サブスクリプション)のいずれかを選択します。 |
Amount(金額) | 1回限り(チャージ)の支払い額を指定します。 |
Currency(通貨) | 1回限り(チャージ)の支払い通貨を指定します。 |
Subscription action(サブスクリプションの操作) | 新規作成するか既存のサブスクリプションを更新するかを選択します。 |
Customer action(顧客の操作) | 新規作成するか既存の顧客を更新するかを選択します。 |
Display options(表示オプション) | カード番号、有効期限、セキュリティコードラベル、およびトラストマークを表示・編集します。 |
支払いフィールドの出力値
支払いフィールドの出力値のデータ型は、サブミッションフロー後は文字列かオブジェクトです。
string
の支払いフィールド出力値のデータ型:
{
"payment_field_id": "pm_1P19e..."
}
Was this helpful?
object
の支払いフィールド出力値のサブスクリプションのデータ型:
{
"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..."
}
}
Was this helpful?
object
の支払いフィールド出力値の請求のデータ型:
{
"payment_field_id": {
"payment_method_id": "pm_1P19e...",
"customer_id": "cus_PqrM...",
"amount": 100,
"payment_intent_id": "pi_3P19e5..."
}
}
Was this helpful?
法律テキストとチェック入力を追加する標準入力。
法律フィールドの出力値
法律フィールド出力値のデータ型はboolean
です。
{
"legal_field_id": true
}
Was this helpful?
単一または複数のドロップダウン選択値を選択できる標準入力。
ドロップダウンフィールドの設定
ドロップダウンフィールドは以下のように設定されています。
設定 | 説明 |
---|---|
Multiple selector(複数セレクター) | 複数の選択肢を有効にします。 |
Advanced(高度な設定) > Internal values(内部の値) | 各オプションに内部の値を割り当てます。 |
Advanced(高度な設定) > Bulk edit(一括編集) | ラベルと内部の値を一括編集します。 |
ドロップダウンフィールドの出力値
ドロップダウンフィールドの出力値のデータ型はstring
か、複数選択が有効な場合はarray of strings
です。
string
のドロップダウンフィールド出力のデータ型の値:
{
"dropdown_field_id": "Option A"
}
Was this helpful?
array of strings
のドロップダウンフィールド出力のデータ型の値:
{
"dropdown_field_id": ["Option A", "Option B"]
}
Was this helpful?
数値を入力できる標準入力。
数字フィールドの出力値
数字フィールドの出力値のデータ型はnumber
です。
{
"number_field_id": 123
}
Was this helpful?
日付または時刻の値を入力できる標準入力。
日付/時刻フィールドの設定
日付/時刻フィールドの設定:
キー | 説明 |
---|---|
Format(形式) | 日付または時間の形式を選択する。 |
日付/時刻フィールドの出力値
日付/時刻フィールド出力の日付のデータ型の値はstring
です:
{
"date_time_field_id": "2023-04-11"
}
Was this helpful?
日付/時刻フィールド出力の時刻のデータ型の値はstring
です:
{
"date_time_field_id": "23:15"
}
Was this helpful?
trueまたはfalseの値を入力できる標準入力。
ブール値フィールドの出力値
ブール値フィールドの出力値データ型はブール値です。
{
"boolean_field_id": true
}
Was this helpful?
カスタマイズして独自のフィールドを作成できる標準フィールド。
カスタムフィールドの設定
カスタムフィールドの設定は次のとおりです。
設定 | 説明 |
---|---|
パラメーター | カスタムフィールドのソースコードで参照するキーと値のペアを追加します。 |
ソースコード | カスタムフィールドにJavascriptコードを追加します。 |
JSONスキーマ | デフォルトでは、カスタムフィールドはあらゆる値のフォーマットを受け入れます。ただし、JSONスキーマを使用して値を検証することができます。 |
詳細については、フォームのカスタムフィールドのコンポーネントをお読みください。
ブロックコンポーネント
ブロックは、ユーザー情報を収集せずにフォームに機能を追加するUIコンポーネントです。

フォームで使用可能なブロック
使用可能なブロックは次のとおりです。
次のフォームノードに進めるボタン。
前のステップノードに移動できるボタン。
現在のステップをスキップして、宛先ノードに直接ジャンプできるボタン。
A component that lets users re-run a flow to 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
です。
{
"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"
}
}
}
}
Was this helpful?
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 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 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:
{
"recaptcha_widget_id": {
"success": true,
"challenge_ts": "2025-03-26T11:22:18Z",
"hostname": "auth.example.com"
}
}
Was this helpful?
Example of v3
response:
{
"recaptcha_widget_id": {
"success": true,
"challenge_ts": "2025-03-26T11:22:18Z",
"hostname": "auth.example.com",
"score": 0.9
}
}
Was this helpful?
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
.
{
"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.
}
}
Was this helpful?
経路ノード
経路ノードを使用すると、ノード間で条件付きロジックジャンプを作成するためのルールを追加できます。
デフォルトで、経路ノードにはDefault Case(デフォルトケース)という名前の単一パススルールールがあり、他のノードに接続します。変数が他のノードに接続するために満たさなければならない一連の条件に基づいて、追加のルールを追加することができます。詳細については、「経路」をお読みください。

フローノード
フローノードを使用すると、フォームにカスタムロジックと統合フローを追加および作成することができます。詳細については、「フロー」をお読みください。


開始ノード
開始ノードはユーザーには表示されません。ここには、アクションを持つフォームを表示する際のユーザー属性など、隠しフィールド変数を構成することができます。

終了スクリーンノード
すべてのフォームに終了スクリーンノードがあります。デフォルトでは、このノードは認証フローを再開し、ここで送信後のフローを構成することができます。
