フロービルダーでのインプットとフォーム

インプットを使用すると、名前、メールアドレス、生年月日などのテキストデータをユーザーから収集できます。入力された値を保存して、フロー内の別の箇所（例：後のスクリーンでユーザーを名前で呼びかけるなど）で参照することもできます。

インプットを追加する

Add input
  1. 左上の + をクリックします。
  2. Input を選択します。
  3. インプットタイプを選択します：
    • Text： 任意の短いテキスト入力。
    • Email： メールアドレス。オプションで形式バリデーションあり。
    • Password： セキュアなテキスト入力。要件を設定可能。
    • Number： 数値。形式を設定可能。
    • Phone number： 電話番号。
    • Date： 日付ピッカーを開く。
    • Time： 時刻ピッカーを開く。
    • Date and time： 日付と時刻の複合ピッカーを開く。

インプットを設定する

レイアウト、スタイル、表示設定などのビジュアル設定の詳細については、要素のスタイリング を参照してください。

すべてのインプットタイプで、Design タブから以下の項目を設定できます：

  • Type： インプットタイプを変更します（Text、Email、Password、Number、Phone number、Date、Time、Date and time）。
  • Element ID： フロー内の別の箇所でインプットの値を参照するための識別子。後述の インプット値を使用する を参照してください。
  • Placeholder： 空のフィールド内に表示されるヒントテキスト。
  • State： さまざまな状況でのインプットの見た目を定義します。Default、Active、Invalid、Disabled を切り替えて、それぞれに異なるビジュアルを適用できます。
  • Typography： フィールド内に表示される値のテキストスタイル。
  • Leading and trailing icons： インプットフィールド内にアイコンを追加します。
Add input

一部の設定は特定のインプットタイプにのみ対応しています：

設定インプットタイプ
Clear buttonText、Email
Validate email formatEmail
Show password iconPassword
Edit password requirementsPassword
Number formatNumber
Date/time formatDate、Time、Date and time
Min and max dateDate、Date and time
Add input
Add input

インプット値を使用する

すべてのインプットは自動的に変数として利用できます。セットアップや On Submit アクションは不要です。値はインプットの Element ID（Input Settings で設定）を通じて参照されます。

フロー内の別の箇所でインプット値を使用するには（例：コピーのパーソナライズ、別フィールドへの入力、条件付きナビゲーションなど）、変数を挿入して以下を選択します：

Element > Screen > <elementId>.value

保存されたインプット値の使い方については、以下のガイドを参照してください：

インプットのバリデーション

バリデーションの動作はインプットタイプによって異なります。すべてのインプットは読み取り専用の Boolean 変数 <elementId>.isValid を公開しており、入力値がそのインプットのバリデーションルールを満たしているかどうかを反映します。条件付きアクションや条件付き表示制御で活用できます（例：メール形式が正しくなるまで「次へ」ボタンを非表示にするなど）。

  • isValid 変数は読み取り専用です。値を設定することはできません。
  • 空のインプットは常に有効と見なされます。
  • テキストインプットにはバリデーションルールがありません。textInput.isValid は常に True を返します。
インプットタイプバリデーションの動作
Text組み込みのバリデーションルールはありません。
Emailオプション。Design パネルで Validate email format を有効にすると、入力値がメール形式チェックで検証されます。
Phone number電話番号形式の組み込みチェック。ビルダーで設定することはできません。ルールは実行時に評価されます。
Password設定可能。後述の パスワード要件 を参照してください。
Number形式ベース。入力値は選択した数値形式と一致する必要があります。後述の 数値形式 を参照してください。
Date、Time、Date and time組み込み。ピッカーは有効な日付または時刻の値のみを受け付けます。

Invalid ビジュアルステート は、ユーザーがフォームを送信したとき（例：キーボードで Enter または Done を押したとき）に有効になります。それまでは、インプットは Active または Default ステートで表示されます。

パスワード要件

パスワードインプットは設定可能なバリデーションルールをサポートしています。Design パネルの Edit password requirements をクリックしてルールエディタを開きます。有効になったルールはインプットの下にライブチェックリストとして表示され、各ルールが満たされると同時にチェックマークが付きます。

利用可能なルール：

  • Min length — 最小文字数。デフォルト: 8。
  • Max length — 最大文字数。デフォルト: 32。
  • Uppercase letter — 大文字（A〜Z）を1文字以上含む。
  • Lowercase letter — 小文字（a〜z）を1文字以上含む。
  • Number — 数字を1文字以上含む。
  • Special character — 英数字以外の文字（例：!@#$%）を1文字以上含む。

すべての有効なルールが満たされた場合にのみ、パスワードが有効と見なされます。

数値形式

Number インプット設定の Format ドロップダウンで、入力値の解析方法を制御します：

  • Integer — 整数のみ（例：4）。
  • Decimal (Point) — ピリオドを小数点区切り文字とする小数（例：4.89）。
  • Decimal (Comma) — カンマを小数点区切り文字とする小数（例：4,89）。

選択した形式と一致しない値は無効と見なされます。

インプットイベントでアクションをトリガーする

メイン記事：アクション

Interactions パネルで、ユーザーの入力に応じたアクションを実行できます：

  • On changed — ユーザーがインプットの値を変更したときに発火します。すべてのインプットタイプで利用可能です。
  • On submit — ユーザーがキーボードで Enter または Done を押してテキストインプットを送信したときに発火します。日付と時刻のピッカーにはこのトリガーはありません。