要素のステート

インタラクティブなフロー要素は、ユーザーのアクションに応じて見た目が変わります。たとえば、タップしたクイズの選択肢は選択済みになり、フォーカスされた入力フィールドはアクティブになります。条件によって変わるステートもあります。たとえば、ボタンを無効化することができます。各ステートを個別にスタイル設定することで、アプリのコードを書かずにユーザーへの視覚的なフィードバックを実現できます。

要素の種類別に使用可能な状態

要素の種類	組み込み状態	追加可能な状態
選択可能な要素	デフォルト、選択済み	無効
入力欄	デフォルト、アクティブ、無効	無効
タップ操作が設定された任意の要素 — ボタン、画像、アイコン、コンテナなど	デフォルト	無効
プログレスインジケーターのステップ	完了、現在、未達	—
Addable ステートはデフォルトでは表示されません — States settings を開いて追加してください。これらは条件駆動型です: どのタイミングで有効化するかを自分で定義します。

状態をスタイルする方法

要素を選択します。右パネルの States セクションに、その要素がサポートする状態の一覧が表示されます。
States セクションで対象の状態を有効にします。必要に応じて条件ベースの「Disabled」状態を追加してください。
塗りつぶし、ボーダー、タイポグラフィなどのプロパティを変更します。変更はその状態にのみ適用されます。ネストされた要素は親と一緒にステートフルになります。子への変更は、親のアクティブな状態にスコープされます。
ビルダーは実行時に一致するスタイルを適用します。

選択可能な要素のステート

Selectable element with Selected state activated and a style override applied

クイズの選択肢、プロダクト、タブ、トライアルトグル、そしてカスタム選択可能要素など、選択可能な要素にはデフォルトで2つのステートが用意されています。

Default：要素の通常時の外観。
Selected：ユーザーが要素をタップしたときに適用されます。ユーザーが選択を解除すると、ビルダーはDefaultに戻ります。単一選択グループでは、ある要素を選択すると他の要素の選択が解除されます。複数選択グループでは、複数の要素を同時に選択できます。トグルは独立しており、一つを選択しても他の要素には影響しません。詳しくはグループタイプを参照してください。

複数の要素（クイズの選択肢など）に同じ状態のスタイルを適用したい場合は、まず1つの要素にスタイルを設定してから複製してください。状態のスタイルは兄弟要素間で引き継がれないため、現時点では複製がその回避策となります。

入力の状態

デフォルト: 入力欄の通常時の外観。
アクティブ: 入力欄にフォーカスが当たっている間に適用される。
無効（Invalid）: 入力内容がバリデーションに失敗したときに適用される。たとえば、メールアドレス欄に @ が含まれていない場合など。詳しくは入力のバリデーションを参照。
無効化（Disabled）: 入力欄が操作できない状態。手動でこの状態を追加する。条件に基づく Disabled 状態を参照。

各状態のスタイル設定は、選択可能な要素と同じ方法で行う。対象の状態をアクティブにしてから、プロパティを変更する。

条件によるDisabledステート

Disabledステートは、ユーザーが要素を操作できないようにします。Default・Selected・Active・Invalidとは異なり、Disabledステートは自動的に有効になりません — ユーザーが定義したトリガー条件が必要です。

Disabledは以下で使用できます：

入力フィールド: テキスト、メール、パスワード、数値、電話番号、日付・時刻など、あらゆる入力フィールド。
選択可能な要素: クイズの選択肢、プロダクト、タブ、トライアルトグル、および任意のカスタム選択可能要素。
タップ操作のある要素: ナビゲーションアクションを起動するボタン、画像、アイコンなど。

Disabled ステートを追加する

「Add Disabled state」オプションが表示されたステート設定パネル

Disabled ステートを追加して設定するには:

対象の要素を選択します。
States セクションで、Settings をクリックします。
Add Disabled state を選択します。Disabled ステートが States セクションに表示されます。
新しい Disabled ステートの横にある Edit conditional state をクリックします。
条件を追加します。入力が検証をパスしない限り submit ボタンを無効にしたい場合は、入力の isValid 変数を false と比較します。
Disabled ステートに制限を視覚的に伝えるスタイルを設定します（例：不透明度を下げるなど）。

Adapty SDKは実行時に条件を評価し、必要に応じてDisabled状態を適用します。アプリのコードは不要です。

プログレスインジケーターのステップ状態

メイン記事：プログレスインジケーター

プログレスインジケーターは、オンボーディングフローのどこまで進んだかをユーザーに示します。各ステップには3つの状態があります：

完了（Completed）：ユーザーがすでに通過したステップ。
現在（Current）：ユーザーが現在いるステップ。
未到達（Upcoming）：まだ到達していないステップ。