CheckboxAPI

React 核取方塊組件的 API 參考文件。了解此匯出模組的 props、CSS 和其他 API。

示範

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

導入

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

閱讀這份關於最小化 bundle 大小的指南，以了解差異。

Props

ButtonBase 組件的 Props 也可使用。

名稱	類型	預設	描述
已勾選	布林值	-	如果為 `true`，則組件會被勾選。
已勾選圖示	節點	<CheckBoxIcon />	組件被勾選時顯示的圖示。
類別	物件	-	覆寫或擴展應用於組件的樣式。請參閱下方的 CSS 類別 API 以了解更多詳細資訊。
顏色	'預設' \| 'primary' \| 'secondary' \| 'error' \| 'info' \| 'success' \| 'warning' \| 字串	'primary'	組件的顏色。它同時支援預設和自訂主題顏色，這些顏色可以按照調色盤自訂指南中所示的方式新增。
預設已勾選	布林值	-	預設的勾選狀態。當組件不受控制時使用。
已停用	布林值	false	如果為 `true`，則組件會被停用。
停用漣漪效果	布林值	false	如果為 `true`，則漣漪效果會被停用。
圖示	節點	<CheckBoxOutlineBlankIcon />	組件未勾選時顯示的圖示。
ID	字串	-	`input` 元素的 ID。
不確定狀態	布林值	false	如果為 `true`，組件會顯示為不確定狀態。這不會將原生 input 元素設定為不確定狀態，因為跨瀏覽器行為不一致。但是，我們會在 `input` 上設定 `data-indeterminate` 屬性。
不確定狀態圖示	節點	<IndeterminateCheckBoxIcon />	組件為不確定狀態時顯示的圖示。
inputProps	物件	-	應用於 `input` 元素的屬性。已棄用－請改用 `slotProps.input`。此 prop 將在 v7 版本中移除。請參閱從已棄用的 API 遷移以了解更多詳細資訊。
onChange	函數	-	狀態變更時觸發的回呼函數。簽名：`function(event: React.ChangeEvent<htmlinputelement>) => void</htmlinputelement>` `event` 回呼函數的事件來源。您可以透過存取 `event.target.checked` (布林值) 來取得新的勾選狀態。
必填	布林值	false	如果為 `true`，則 `input` 元素為必填。
尺寸	'medium' \| 'small' \| 字串	'medium'	組件的尺寸。`small` 等同於密集的核取方塊樣式。
slotProps	{ input?: func \| object, root?: func \| object }	{}	用於每個 slot 內部的 props。
slots	{ input?: elementType, root?: elementType }	{}	用於每個 slot 內部的組件。
sx	Array<func \| object \| bool> \| func \| object	-	系統 prop，允許定義系統覆寫以及額外的 CSS 樣式。請參閱 `sx` 頁面以了解更多詳細資訊。
值	任何類型	-	組件的值。DOM API 將其轉換為字串。瀏覽器使用 "on" 作為預設值。

ref 會轉發到根元素。

繼承

雖然上面未明確說明，但 ButtonBase 組件的 props 也可在 Checkbox 中使用。您可以利用這一點來鎖定巢狀組件。

主題預設 props

您可以使用 MuiCheckbox 透過主題變更此組件的預設 props。

Slots

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

CSS 類別

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

類別名稱	規則名稱	描述
.Mui-checked		如果 `checked={true}`，則應用於根元素的狀態類別。
.Mui-disabled		如果 `disabled={true}`，則應用於根元素的狀態類別。
.MuiCheckbox-colorPrimary	colorPrimary	如果 `color="primary"`，則應用於根元素的狀態類別。
.MuiCheckbox-colorSecondary	colorSecondary	如果 `color="secondary"`，則應用於根元素的狀態類別。
.MuiCheckbox-indeterminate	不確定狀態	如果 `indeterminate={true}`，則應用於根元素的狀態類別。
.MuiCheckbox-sizeMedium	sizeMedium	如果 `size="medium"`，則應用於根元素的狀態類別。
.MuiCheckbox-sizeSmall	sizeSmall	如果 `size="small"`，則應用於根元素的狀態類別。

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

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

原始碼

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