跳到主要內容跳到主要內容
🚀 影響 Joy UI 2025 年的開發藍圖！參與最新的開發者調查

RadioGroupAPI

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

示範

Import

import RadioGroup from '@mui/joy/RadioGroup';
// or
import { RadioGroup } from '@mui/joy';

閱讀關於最小化 bundle 大小的指南，瞭解它們之間的差異。

Props

名稱類型預設值描述
classNamestring-

套用至根元素 (root element) 的類別名稱。

color'danger'
| 'primary'
| 'success'
| 'warning'
| string		'neutral'

元件的顏色。它支援適用於此元件的 theme colors。

若要瞭解如何新增自己的顏色，請查看主題元件 — 擴展顏色。

componentelementType-

用於根節點的元件。可以是使用 HTML 元素的字串或元件。

defaultValueany-

預設值。當元件不受控制時使用。

disableIconboolfalse

radio 的 disabledIcon prop。如果指定，此值會向下傳遞到此元素下的每個 radio。

namestring-

用於參考控制項值的名稱。如果您未提供此 prop，則會回退到隨機產生的名稱。

onChangefunc-

在選取 radio button 時觸發的回呼函數。

簽名：function(event: React.ChangeEvent) => void
  • event 回呼的事件來源。您可以透過存取 event.target.value (字串) 來取出新值。
orientation'horizontal'
| 'vertical'		'vertical'

元件方向。

overlayboolfalse

radio 的 overlay prop。如果指定，此值會向下傳遞到此元素下的每個 radio。

size'sm'
| 'md'
| 'lg'
| string		'md'

元件的大小。

若要瞭解如何為元件新增自訂大小，請查看主題元件 — 擴展尺寸。

slotProps{ root?: func
| object }		{}

用於每個 slot 內部的 props。

slots{ root?: elementType }{}

用於每個 slot 內部的元件。

請參閱下方的Slots API 以瞭解更多詳細資訊。

sxArray<func
| object
| bool>
| func
| object		-

系統 prop，允許定義系統覆寫以及額外的 CSS 樣式。

請參閱 `sx` 頁面以瞭解更多詳細資訊。

valueany-

所選 radio button 的值。DOM API 會將其轉換為字串。

variant'outlined'
| 'plain'
| 'soft'
| 'solid'
| string		'plain'

要使用的全域 variant。

若要瞭解如何新增自己的 variants，請查看主題元件 — 擴展 variants。

ref 會轉發到根元素。

Theme 預設 props

您可以使用 JoyRadioGroup 透過 theme 變更此元件的預設 props。

Slots

若要瞭解如何自訂 slot，請查看覆寫元件結構指南。

Slot 名稱類別名稱預設元件描述
root.MuiRadioGroup-root'div'呈現 root 的元件。

CSS 類別

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

類別名稱規則名稱描述
.MuiRadioGroup-colorDangercolorDanger如果 color="danger"，則套用至根元素的類別名稱。
.MuiRadioGroup-colorNeutralcolorNeutral如果 color="neutral"，則套用至根元素的類別名稱。
.MuiRadioGroup-colorPrimarycolorPrimary如果 color="primary"，則套用至根元素的類別名稱。
.MuiRadioGroup-colorSuccesscolorSuccess如果 color="success"，則套用至根元素的類別名稱。
.MuiRadioGroup-colorWarningcolorWarning如果 color="warning"，則套用至根元素的類別名稱。
.MuiRadioGroup-horizontalhorizontal如果 orientation="horizontal"，則套用至根元素的類別名稱。
.MuiRadioGroup-sizeLgsizeLg如果 size="lg"，則套用至根元素的類別名稱。
.MuiRadioGroup-sizeMdsizeMd如果 size="md"，則套用至根元素的類別名稱。
.MuiRadioGroup-sizeSmsizeSm如果 size="sm"，則套用至根元素的類別名稱。
.MuiRadioGroup-variantOutlinedvariantOutlined如果 variant="outlined"，則套用至根元素的類別名稱。
.MuiRadioGroup-variantPlainvariantPlain如果 variant="plain"，則套用至根元素的類別名稱。
.MuiRadioGroup-variantSoftvariantSoft如果 variant="soft"，則套用至根元素的類別名稱。
.MuiRadioGroup-variantSolidvariantSolid如果 variant="solid"，則套用至根元素的類別名稱。
.MuiRadioGroup-verticalvertical如果 orientation="vertical"，則套用至根元素的類別名稱。

您可以使用以下自訂選項之一覆寫元件的樣式

原始碼

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