RadioAPI

React Radio 元件的 API 參考文件。瞭解此匯出模組的 props、CSS 和其他 API。

範例

如需此 React 元件的使用範例和詳細資訊，請造訪元件示範頁面

Radio Group

匯入

import Radio from '@mui/material/Radio';
// or
import { Radio } from '@mui/material';

閱讀關於最小化套件大小的指南，以瞭解差異。

Props

ButtonBase 元件的 Props 也可用。

名稱	類型	預設	描述
checked	bool	-	如果 `true`，則元件會被勾選。
checkedIcon	node	<RadioButtonIcon checked />	元件被勾選時要顯示的圖示。
classes	object	-	覆寫或擴充套用至元件的樣式。請參閱下方的CSS 類別 API 以取得更多詳細資訊。
color	'default' \| 'primary' \| 'secondary' \| 'error' \| 'info' \| 'success' \| 'warning' \| string	'primary'	元件的顏色。它同時支援預設和自訂主題色彩，這些色彩可以按照調色盤自訂指南中所示的方式新增。
disabled	bool	-	如果 `true`，則元件會停用。
disableRipple	bool	false	如果 `true`，則會停用漣漪效果。
icon	node	<RadioButtonIcon />	元件未勾選時要顯示的圖示。
id	string	-	`input` 元素的 id。
inputProps	object	-	套用至 `input` 元素的屬性。已棄用－請改用 `slotProps.input`。此 prop 將在 v7 中移除。請參閱從已棄用的 API 遷移以取得更多詳細資訊。
inputRef	ref	-	將 ref 傳遞至 `input` 元素。已棄用－請改用 `slotProps.input.ref`。此 prop 將在 v7 中移除。請參閱從已棄用的 API 遷移以取得更多詳細資訊。
name	string	-	`input` 元素的 Name 屬性。
onChange	func	-	狀態變更時觸發的回呼。簽名：`function(event: React.ChangeEvent<htmlinputelement>) => void` `event` 回呼的事件來源。您可以透過存取 `event.target.value` (字串) 來取出新值。您可以透過存取 `event.target.checked` (布林值) 來取出新的勾選狀態。
required	bool	false	如果 `true`，則 `input` 元素為必要。
size	'medium' \| 'small' \| string	'medium'	元件的大小。`small` 相當於 dense radio 樣式。
slotProps	{ input?: func \| object, root?: func \| object }	{}	用於每個內部 slot 的 props。
slots	{ input?: elementType, root?: elementType }	{}	用於每個內部 slot 的元件。
sx	Array<func \| object \| bool> \| func \| object	-	允許定義系統覆寫以及其他 CSS 樣式的系統 prop。請參閱 `sx` 頁面以取得更多詳細資訊。
value	any	-	元件的值。DOM API 會將其轉換為字串。

ref 會轉發到根元素。

繼承

雖然上面沒有明確記錄，但 ButtonBase 元件的 props 也可在 Radio 中使用。您可以利用這一點來鎖定巢狀元件。

主題預設 props

您可以使用 MuiRadio 來透過主題變更此元件的預設 props。

Slots

Slot 名稱	類別名稱	預設元件	描述
root	.MuiRadio-root	`SwitchBase`	呈現 root slot 的元件。
input		`SwitchBase 的 input`	呈現 input slot 的元件。

CSS 類別

這些類別名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會套用至元件的 slot。

類別名稱	規則名稱	描述
.Mui-checked		如果 `checked={true}`，則套用至根元素的狀態類別。
.Mui-disabled		如果 `disabled={true}`，則套用至根元素的狀態類別。
.MuiRadio-colorPrimary	colorPrimary	如果 `color="primary"`，則套用至根元素的樣式。
.MuiRadio-colorSecondary	colorSecondary	如果 `color="secondary"`，則套用至根元素的樣式。
.MuiRadio-sizeSmall	sizeSmall	如果 `size="small"`，則套用至根元素的樣式。

您可以使用以下其中一種自訂選項來覆寫元件的樣式

使用全域類別名稱。
使用規則名稱作為自訂主題中元件styleOverrides 屬性的一部分。

原始碼

如果您在本頁中找不到資訊，請考慮查看元件的實作以取得更多詳細資訊。