---
title: "フロービルダーでのインプットとフォーム"
description: "テキストフィールドやチェックボックスなどのインタラクティブなフォーム要素を追加する。"
---

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

## インプットを追加する \{#add-an-input\}

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

## インプットを設定する \{#configure-an-input\}

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

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

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

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

| 設定                       | インプットタイプ          |
|----------------------------|---------------------------|
| Clear button               | Text、Email               |
| Validate email format      | Email                     |
| Show password icon         | Password                  |
| Edit password requirements | Password                  |
| Number format              | Number                    |
| Date/time format           | Date、Time、Date and time |
| Min and max date           | Date、Date and time       |

## インプット値を使用する \{#use-input-values\}

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

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

**Element > Screen > `<elementId>.value`**

:::link
保存されたインプット値の使い方については、以下のガイドを参照してください：
- [条件付きナビゲーション](onboarding-navigation-branching)
- [変数](onboarding-variables)
:::

## インプットのバリデーション \{#input-validation\}

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

:::note
- `isValid` 変数は読み取り専用です。値を設定することはできません。
- 空のインプットは常に有効と見なされます。
- テキストインプットにはバリデーションルールがありません。`textInput.isValid` は常に `True` を返します。
:::

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

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

### パスワード要件 \{#password-requirements\}

パスワードインプットは設定可能なバリデーションルールをサポートしています。**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\}

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

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

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

## インプットイベントでアクションをトリガーする \{#trigger-actions-on-input-events\}

:::link
メイン記事：[アクション](onboarding-actions)
:::

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

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