---
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:** 入力フィールド内にアイコンを追加します。

一部の設定は特定の入力タイプに固有のものです：
| 設定 | 入力タイプ |
|----------------------------|---------------------------|
| クリアボタン | テキスト、メール |
| メール形式の検証 | メール |
| パスワード表示アイコン | パスワード |
| パスワード要件の編集 | パスワード |
| 数値フォーマット | 数値 |
| 日付/時刻フォーマット | 日付、時刻、日付と時刻 |
| 最小・最大日付 | 日付、日付と時刻 |

## 入力値を使用する \{#use-input-values\}

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

フロー内の別の場所で入力値を使用するには（たとえば、テキストのパーソナライズ、別のフィールドへの入力、または条件付きナビゲーションの制御など）、変数を挿入して次を選択します：

**Element > Screen > `<elementId>.value`**
:::link
保存された入力値の使い方については、関連ガイドを参照してください：
- [条件付きナビゲーション](onboarding-navigation-branching)
- [変数](onboarding-variables)
:::
## 入力バリデーション \{#input-validation\}

バリデーションの動作は入力タイプによって異なります。すべての入力には読み取り専用のBoolean変数 `<elementId>.isValid` が用意されており、入力値が検証ルールを満たしているかどうかを反映します。条件アクションや条件付き表示に活用できます。たとえば、メールアドレスのフォーマットが正しくなるまで「次へ」ボタンを非表示にするといった使い方が可能です。

:::note
- `isValid` 変数は読み取り専用です。値をセットすることはできません。
- 空の入力は常に有効とみなされます。
- テキスト入力にはバリデーションルールがありません。`textInput.isValid` は常に `True` を返します。
:::
| 入力タイプ | バリデーションの動作 |
|---|---|
| テキスト | 組み込みのバリデーションルールはありません。 |
| メール | 任意設定。**Design** パネルの **Validate email format** を有効にすると、入力値をメール形式でチェックします。 |
| 電話番号 | 組み込みの電話番号フォーマットチェックがあります。ビルダーでは設定できません — ルールはランタイム時に評価されます。 |
| パスワード | 設定可能。下記の[パスワード要件](#password-requirements)を参照してください。 |
| 数値 | フォーマットベース。入力値は選択した数値フォーマットに一致する必要があります。下記の[数値フォーマット](#number-format)を参照してください。 |
| 日付、時刻、日時 | 組み込み。ピッカーは有効な日付または時刻の値のみ受け付けます。 |
**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 を押してテキストインプットを送信したときに発火します。日付と時刻のピッカーにはこのトリガーはありません。