Radio單選按鈕

單選按鈕用來讓使用者在一組選項中選擇其中一個，確保每次只能選中一個選項。

使用方法

按需引入元件：

import 'mdui/components/radio-group.js';
import 'mdui/components/radio.js';

按需引入元件的 TypeScript 型別：

import type { RadioGroup } from 'mdui/components/radio-group.js';
import type { Radio } from 'mdui/components/radio.js';

使用範例：

Chinese

English

<mdui-radio-group value="chinese">
  <mdui-radio value="chinese">Chinese</mdui-radio>
  <mdui-radio value="english">English</mdui-radio>
</mdui-radio-group>

範例

選取狀態

<mdui-radio-group> 元件的 value 屬性值即為目前選取的 <mdui-radio> 元件的 value 屬性值。你也可以透過更新 <mdui-radio-group> 元件的 value 屬性值，來切換目前選取的單選按鈕。

Chinese

English

<mdui-radio-group value="chinese">
  <mdui-radio value="chinese">Chinese</mdui-radio>
  <mdui-radio value="english">English</mdui-radio>
</mdui-radio-group>

原始碼

你可以單獨使用 <mdui-radio> 元件，此時可以透過 checked 屬性來讀取和修改選取狀態。

Radio

<mdui-radio checked>Radio</mdui-radio>

原始碼

停用狀態

你可以透過在 <mdui-radio-group> 元件上加上 disabled 屬性，來停用整個單選按鈕組。

Chinese

English

<mdui-radio-group disabled>
  <mdui-radio value="chinese">Chinese</mdui-radio>
  <mdui-radio value="english">English</mdui-radio>
</mdui-radio-group>

原始碼

如果需要停用特定的單選按鈕，可以在 <mdui-radio> 元件上加上 disabled 屬性。

Chinese

English

<mdui-radio-group>
  <mdui-radio value="chinese">Chinese</mdui-radio>
  <mdui-radio value="english" disabled>English</mdui-radio>
</mdui-radio-group>

原始碼

圖示

你可以透過設定 unchecked-icon 和 checked-icon 屬性，分別定義未選取和選取狀態下的單選按鈕的 Material Icons 圖示。也可以透過 unchecked-icon 和 checked-icon slot 來設定。

Chinese

English

<mdui-radio-group value="chinese">
  <mdui-radio
    unchecked-icon="check_box_outline_blank"
    checked-icon="lock"
    value="chinese"
  >Chinese</mdui-radio>
  <mdui-radio value="english">
    <mdui-icon slot="unchecked-icon" name="check_box_outline_blank"></mdui-icon>
    <mdui-icon slot="checked-icon" name="lock"></mdui-icon>
    English
  </mdui-radio>
</mdui-radio-group>

原始碼

`mdui-radio-group` API

屬性

HTML 屬性	JavaScript 屬性	型別	預設值
`disabled`	`disabled`	`boolean`	`false`
是否停用此元件
`form`	`form`	`string`	-
關聯的 `<form>` 元素。此屬性值應為同一頁面中的一個 `<form>` 元素的 `id`。若未指定此屬性，則該元素必須是 `<form>` 元素的子元素。透過此屬性，你可以將元素放置在頁面的任何位置，而不僅僅是 `<form>` 元素的子元素。
`name`	`name`	`string`	`''`
單選按鈕群組的名稱，將與表單資料一起送出
`value`	`value`	`string`	`''`
單選按鈕群組目前選取的值，將與表單資料一起送出
	`defaultValue`	`string`	`''`
預設選取的值。在重設表單時，將重設為該預設值。該屬性只能透過 JavaScript 屬性設定
`required`	`required`	`boolean`	`false`
送出表單時，是否必須選取其中一個單選按鈕
	`validity`	`ValidityState`	-
表單驗證狀態物件，具體參見 `ValidityState`
	`validationMessage`	`string`	-
如果表單驗證未通過，此屬性將包含提示資訊。如果驗證通過，此屬性將為空字串

方法

名稱	參數	回傳值
`checkValidity`		`boolean`
檢查表單欄位是否通過驗證。如果未通過，回傳 `false` 並觸發 `invalid` 事件；如果通過，回傳 `true`
`reportValidity`		`boolean`
檢查表單欄位是否通過驗證。如果未通過，回傳 `false` 並觸發 `invalid` 事件；如果通過，回傳 `true`。如果驗證未通過，還會在元件上顯示驗證失敗的提示。
`setCustomValidity`	`message: string`	`void`
設定自訂的錯誤提示文字。只要這個文字不為空，就表示欄位未通過驗證

事件

名稱
`change`
選取值變化時觸發
`input`
選取值變化時觸發
`invalid`
表單欄位驗證未通過時觸發

Slots

名稱
預設
`<mdui-radio>` 元素

`mdui-radio` API

屬性

HTML 屬性	JavaScript 屬性	型別	預設值
`value`	`value`	`string`	`''`
目前單選項的值
`disabled`	`disabled`	`boolean`	`false`
是否停用目前單選項
`checked`	`checked`	`boolean`	`false`
目前單選項是否已選取
`unchecked-icon`	`uncheckedIcon`	`string`	-
未選取狀態的 Material Icons 圖示名。也可以透過 `slot="unchecked-icon"` 設定
`checked-icon`	`checkedIcon`	`string`	-
選取狀態的 Material Icons 圖示名。也可以透過 `slot="checked-icon"` 設定
`autofocus`	`autofocus`	`boolean`	`false`
是否在頁面載入完成後自動取得焦點
`tabindex`	`tabIndex`	`number`	-
元素在使用 Tab 鍵切換焦點時的順序

方法

名稱	參數	回傳值
`click`		`void`
模擬滑鼠點擊元素
`focus`	`options: FocusOptions` (選配)	`void`
將焦點設定到目前元素。可以傳入一個物件作為引數，該物件的屬性包括： `preventScroll`：預設情況下，元素取得焦點後，頁面會捲動以將該元素捲動到檢視中。如果不希望頁面捲動，可以將此屬性設定為 `true`。
`blur`		`void`
移除目前元素的焦點

事件

名稱
`focus`
取得焦點時觸發
`blur`
失去焦點時觸發
`change`
選取該單選項時觸發

Slots

名稱
預設
文字內容
`unchecked-icon`
未選取狀態的圖示
`checked-icon`
選取狀態的圖示

CSS Parts

名稱
`control`
左側圖示容器
`unchecked-icon`
未選取狀態的圖示
`checked-icon`
選取狀態的圖示
`label`
文字內容

NavigationRail 側邊導覽列

RangeSlider 範圍滑桿