開關

開關是一種 UI 元素，可讓使用者在兩種狀態之間做選擇——最常見的是開啟/關閉。

Switch API

import { Switch } from '@mui/base/Switch';
// or
import { Switch } from '@mui/base';

原生元件的 Props 也可用。

名稱	類型	預設值	描述
checked	bool	-	若為 `true`，則元件會被核取。
className	string	-	套用至根元素的類別名稱。
defaultChecked	bool	-	預設的核取狀態。當元件不受控制時使用。
disabled	bool	-	若為 `true`，則元件會被停用。
onChange	func	-	當狀態變更時觸發的回呼函式。簽名：`function(event: React.ChangeEvent<htmlinputelement>) => void</htmlinputelement>` `event` 回呼的事件來源。您可以透過存取 `event.target.value` (字串) 來拉出新值。您可以透過存取 `event.target.checked` (布林值) 來拉出新的核取狀態。
readOnly	bool	-	若為 `true`，則元件為唯讀。
required	bool	-	若為 `true`，則 `input` 元素為必填。
slotProps	{ input?: func \| object, root?: func \| object, thumb?: func \| object, track?: func \| object }	{}	用於 Switch 內每個 slot 的 props。
slots	{ input?: elementType, root?: elementType, thumb?: elementType, track?: elementType \| null }	{}	用於 Switch 內每個 slot 的元件。可以是字串（使用 HTML 元素）或元件。請參閱下方Slots API以了解更多詳細資訊。

ref 會轉發到根元素。

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

Slot 名稱	類別名稱	預設元件	描述
root	.base-Switch-root	`'span'`	呈現根元件的元件。
input	.base-Switch-input	`'input'`	呈現 input 的元件。
thumb	.base-Switch-thumb	`'span'`	呈現 thumb 的元件。
track	.base-Switch-track	`'span'`	呈現 track 的元件。

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