> For the complete documentation index, see [llms.txt](https://docs.dashcomb.com/dashcomb-help-center/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.dashcomb.com/dashcomb-help-center/ide/ui-component/radio.md).

# Radio

Radioは主にフォームの送信や表示の際に使う単一選択用のコンポーネントです。Dashcombが提供しているRadioboxは、通常のHTMLのRadioboxをベースにして、管理画面の用途に合わせています。

## プロパティ

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

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

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

**オブジェクト**

ラジオオブジェクトの変数名です。Radioコンポーネントをドラッグ＆ドロップすると、そのオブジェクトが自動的に`radio1`、`radio2`... と名付けられます。

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

（例）`{{radio1.value}}` で `radio1` の表示状態の真偽値を取得することができます。

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

#### 非表示

トグルスイッチをONにすると、Radioコンポーネントが非表示になります。

#### 無効

トグルスイッチをONにすると、Radioコンポーネントが無効になります。

**入力必須**

トグルスイッチをONにすると、Radioコンポーネントが入力必須になります。

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

**ラベル文字**

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

`Radio` を任意の文字列に入れ替えることはもちろん、構文 `{{オブジェクト名.プロパティ}}` を入れることにより、動的に設定することができます。

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

**デフォルト値**

Radioコンポーネントの初期値です。画面を開いた時点で、value 属性に自動的に設定される値を指定します。初期値は `value1` で、変数 `radio.value` の値は `value1`になります。

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

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

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

**オプション**

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

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

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

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

### アクション

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

#### **onChange**

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

**onForcus**

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

**onBlur**

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

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

**外観種別**

Radioコンポーネントの形を指定します。

**展開方向**

選択肢の並び方向を指定します。

**ラベル表示**

Radioコンポーネントラベルの表示・非表示を切り替えます。

トグルスイッチを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>