# Switch

Switchは主にフォームの送信や表示の際に使う論理型入力や表示用のコンポーネントです。Dashcombが提供しているSwitchは、通常のHTMLのToggle Switchを使い、管理画面の用途に合わせて、作り上げた機能です。

## プロパティ

Switchコンポーネントには、以下のプロパティが含まれています。

<figure><img src="/files/MVPtk7ksoP7rSdMcZuHw" alt=""><figcaption></figcaption></figure>

### 共通 <a href="#common" id="common"></a>

#### **オブジェクト**

スイッチオブジェクトの変数名です。Switchをドラッグ＆ドロップすると、そのオブジェクトが自動的に `switch1`、`switch2`... と名付けられます。

ここで設定した変数名は、構文 `{{オブジェクト名.プロパティ}}` でオブジェクトを参照するために利用できます。

（例）`{{switch1.value}}` で `switch1` の値を取得することができます。

利用できるオブジェクトとプロパティは、[インスペクターメニュー](/dashcomb-help-center/ide/region/inspector-region.md) で確認できます。

#### 非表示

トグルスイッチをONにすると、スイッチが非表示になります。

#### 無効

トグルスイッチをONにすると、スイッチが無効になり、入力できなくなります。

### データ <a href="#data" id="data"></a>

#### ラベル文字

スイッチの項目名を表すラベルテキストです。Switch コンポーネントをドラッグ＆ドロップすると、自動的に `Switch` に設定されます。

`{{オブジェクト名.プロパティ}}` 構文を用いて、動的に設定することができます。

{% hint style="info" %}
`{{}}` 構文については、[オブジェクトやデータの参照](/dashcomb-help-center/ide/obujekutoyadtano.md) のページを参照してください。
{% endhint %}

#### デフォルト値

スイッチの初期値です。画面を開いた時点での初期値は`true` に設定されており、変数 `switch.value` は `true` として評価されます。

`false` や数字以外のその他の文字列に変更すると、変数 `switch.value` は `false` として評価されます。

`0` に変更すると、変数 `switch.value` は `false` として評価され、その他の数字に変更すると、`true` として評価されます。

`{{オブジェクト名.プロパティ}}` 構文を用いて、動的に設定することができます。

（例）オブジェクト `switch2` のデフォルト値に `{{switch1.value}}` を入力することによって、`switch1` に設定した内容をリアルタイムで `switch2` に反映することができます。

現在の設定値は、`{{オブジェクト名.defaultValue}}` で参照できます。

デフォルト値は任意ですが、データソースの値に合わせて、`true`、`false`、`0`、`1` のように設定すると分かりやすいです。

### アクション

Switch コンポーネントのアクションは、以下を設定することができます。

#### **onChange**

スイッチのonChange イベントの発生時（Switchの入力内容が変更された時）に、指定アクションを実行できます。

**onForcus**

スイッチのonForcus イベントの発生時（Switchがフォーカス状態になった時）に、指定アクションを実行できます。

**onBlur**

スイッチのonBlur イベントの発生時（Switchがフォーカス状態でなくなった時）に、指定アクションを実行できます。

### 外観 <a href="#appearance" id="appearance"></a>

**ラベル**

スイッチラベルの表示・非表示を切り替えます。

トグルスイッチをOFFにすると、スイッチラベルが表示されなくなりますが、スイッチ本体に影響はありません。

以下の項目で表示を調整できます。

<table><thead><tr><th width="133">項目名</th><th>設定内容</th><th data-hidden></th></tr></thead><tbody><tr><td>ラベル整列</td><td>ラベルテキストの行内の表示位置を設定できます。右寄せ、左寄せ、中央揃え の3つから選択できます。</td><td></td></tr><tr><td>ラベル位置</td><td>ラベルテキストと入力欄の並べ方を設定できます。上下並べ、または左右並べから選択できます。</td><td></td></tr><tr><td>ラベル横幅</td><td>ラベル位置を「左右並べ」に設定したときの、ラベルテキストの表示領域の横幅を指定できます。初期値は33%です。</td><td></td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.dashcomb.com/dashcomb-help-center/ide/ui-component/switch.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.