---
title: "要素のステート"
description: "ステートごとに要素をスタイリングし、条件を使って実行時に要素を無効化します。"
---

インタラクティブなフロー要素は、ユーザーのアクションに応じて見た目が変わります。たとえば、タップしたクイズの選択肢は**選択済み**になり、フォーカスされた入力フィールドは**アクティブ**になります。条件によって変わるステートもあります。たとえば、ボタンを**無効化**することができます。各ステートを個別にスタイル設定することで、アプリのコードを書かずにユーザーへの視覚的なフィードバックを実現できます。
<div style={{
  maxWidth: '560px',
  margin: '0 auto 2rem',
  position: 'relative',
  aspectRatio: '16/9',
  width: '100%'
}}>
  <iframe
    style={{
      position: 'absolute',
      top: 0,
      left: 0,
      width: '100%',
      height: '100%'
    }}
    src="https://www.youtube.com/embed/gdsNfHpKAqQ?si=VY5mqZgH1j0RB6fE"
    title="YouTube video player"
    frameBorder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    referrerPolicy="strict-origin-when-cross-origin"
    allowFullScreen
  />
</div>
## 要素の種類別の利用可能な状態 \{#available-states-by-element-kind\}

| 要素の種類 | 組み込み状態 | 追加可能な状態 |
|---|---|---|
| [選択可能な要素](#selectable-element-states) | **Default**、**Selected** | **Disabled** |
| [入力](#input-states) | **Default**、**Active**、**Invalid** | **Disabled** |
| [タップ操作を持つ任意の要素](#condition-driven-disabled-state) — ボタン、画像、アイコン、スタックなど | **Default** | **Disabled** |
| [プログレスインジケーターのステップ](#step-states-for-progress-indicators) | **Completed**、**Current**、**Upcoming** | — |
**Addable** ステートはデフォルトでは表示されません — **States settings** Settings を開いて追加してください。これらは [**条件駆動型**](#condition-driven-disabled-state) です: どのタイミングで有効化するかを自分で定義します。
## ステートのスタイル設定方法 \{#how-to-style-a-state\}

1. 要素を選択します。右パネルの **States** セクションに、その要素が対応するステートが一覧表示されます。
2. **States** セクションで、対象のステートを有効にします。必要に応じて[条件ベースの Disabled ステート](#condition-driven-disabled-state)を追加します。
3. フィル、ボーダー、タイポグラフィ、テキストコンテンツなど、任意のプロパティを変更します。変更はそのステートにのみ適用されます。
ネストされた要素は、親要素とともにステートフルになります。子要素のカラー、レイアウト、テキストコンテンツなど、あらゆる変更は親要素のアクティブなステートにスコープされます。

4. ビルダーは実行時に一致するスタイルを適用します。

:::tip
ステートは、テキスト要素の見た目だけでなく、*内容*も変更できます。ビルダーはテキストコンテンツをフィルやボーダー幅と同じカテゴリのプロパティとして扱います。
:::
## 選択可能な要素のステート \{#selectable-element-states\}

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

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

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

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

各状態のスタイル設定は、選択可能な要素と同じ方法で行う。対象の状態をアクティブにしてから、プロパティを変更する。
## 条件によるDisabledステート \{#condition-driven-disabled-state\}

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

Disabledは以下で使用できます：
- **入力フィールド**: テキスト、メール、パスワード、数値、電話番号、日付・時刻など、あらゆる[入力フィールド](builder-inputs-and-forms)。
- **選択可能な要素**: クイズの選択肢、プロダクト、タブ、トライアルトグル、および任意の[カスタム選択可能要素](flow-selectable-elements#make-an-element-selectable)。
- **タップ操作のある要素**: ナビゲーションアクションを起動するボタン、画像、アイコンなど。
### Disabled ステートを追加する \{#add-the-disabled-state\}

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

Adapty SDKは実行時に条件を評価し、必要に応じてDisabled状態を適用します。アプリのコードは不要です。
## プログレスインジケーターのステップ状態 \{#step-states-for-progress-indicators\}

:::link
メイン記事：[プログレスインジケーター](builder-loaders-and-progress-bars#step-states)
:::

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

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