---
description: 介紹使用 Radio 選項按鈕元件
---

# Radio

<div data-full-width="false"><figure><img src="https://3730302285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWkKD42HpQdyU6pMEvZom%2Fuploads%2F8iPXkUjPVBeVldeBxHYa%2Fradio.webp?alt=media&#x26;token=e50eb90d-1b06-4f7f-b361-fabe17790ffd" alt="Radio 介紹示意圖"><figcaption></figcaption></figure></div>

Radio 選項按鈕，通常用於表單之中，同一系列中的選項按鈕只能選取其中一個成為回答。

### 基本使用 <a href="#basic" id="basic"></a>

```html
<bpa-radio name="example-name" value="1" v-model="example-data">Radio</bpa-radio>
```

### 禁用 <a href="#disabled" id="disabled"></a>

```html
<bpa-radio name="example-name" value="1" v-model="example-data" disabled>Radio</bpa-radio>
```

### 屬性 <a href="#props" id="props"></a>

<table data-full-width="false"><thead><tr><th width="136">Name</th><th width="161">Value</th><th>Type</th><th>Default</th><th data-type="checkbox">Required</th><th>Note</th></tr></thead><tbody><tr><td>id</td><td></td><td>String</td><td>random</td><td>false</td><td></td></tr><tr><td>name</td><td></td><td>String</td><td></td><td>false</td><td></td></tr><tr><td>disabled</td><td></td><td>Boolean</td><td></td><td>false</td><td></td></tr><tr><td>value</td><td></td><td>String</td><td></td><td>false</td><td></td></tr><tr><td>model</td><td></td><td>String</td><td></td><td>false</td><td></td></tr></tbody></table>

### Demo

{% embed url="https://codesandbox.io/embed/piman-radio-h7f7c1?fontsize=14&module=/src/App.vue&theme=dark" fullWidth="false" %}
