# Checkbox

Checkboxは主にフォームの送信や表示の際に使う複数選択用のコンポーネントです。Dashcombが提供しているCheckboxは、通常のHTMLのCheckboxをベースにして、管理画面の用途に合わせており、簡単なバリデーション機能を内蔵しています。

バリデーション機能は入力必須、最小選択数、最大選択数などを含みます。

## プロパティ

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

<figure><img src="https://3498714457-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgIESKBveovlGvQ1BqYEP%2Fuploads%2Fgit-blob-fb811a991dc015a6395ce1e0e36889018756be25%2FUI%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%EF%BC%9A%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9.png?alt=media" alt=""><figcaption></figcaption></figure>

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

**オブジェクト**

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

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

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

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

#### 非表示

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

#### 無効

トグルスイッチをONにすると、チェックボックスが無効になります。

#### 入力必須

トグルスイッチをONにすると、チェックボックスが必須入力になります。

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

#### ラベル文字

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

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

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

**デフォルト値**

チェックボックスの初期値です。`["value2","value3"]` に設定されており、変数 `checkbox.value` の値は `["value2","value3"]`という配列になります。

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

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

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

**オプション**

選択肢の詳細な設定を変更できます。Checkboxのオプションの初期値は下記のようなJSON式の配列になっています。

```json
 [
   { "label": "option1", "value": "value1" },
   { "label": "option2", "value": "value2", "disabled": true },
   { "label": "option3", "value": "value3" }
 ]
```

上記のように値を固定的する設定以外にも、 `{{オブジェクト名.プロパティ}}` 構文を用いて、動的に設定することができます。

（例）オブジェクト `checkbox2` のオプションに `{{checkbox1.options}}` を入力することによって、`checkbox1` のオプションがリアルタイムで `checkbox2` に反映することができます。

**最小選択数**

選択数の下限です。

**最大選択数**

選択数の上限です。

### アクション

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

#### **onChange**

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

**onForcus**

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

**onBlur**

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

### 外観 <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>