開關

開關用於切換單一設定的開啟或關閉狀態。

開關是調整行動裝置設定的首選方式。開關控制的選項及其所處狀態，應透過對應的內嵌標籤清楚說明。

基本開關

<Switch {...label} defaultChecked />
<Switch {...label} />
<Switch {...label} disabled defaultChecked />
<Switch {...label} disabled />

<Switch {...label} defaultChecked />
<Switch {...label} />
<Switch {...label} disabled defaultChecked />
<Switch {...label} disabled />

按下 Enter 鍵開始編輯

尺寸

使用 size 屬性來變更開關的尺寸。

<Switch {...label} defaultChecked size="small" />
<Switch {...label} defaultChecked />

<Switch {...label} defaultChecked size="small" />
<Switch {...label} defaultChecked />

按下 Enter 鍵開始編輯

顏色

<Switch {...label} defaultChecked />
<Switch {...label} defaultChecked color="secondary" />
<Switch {...label} defaultChecked color="warning" />
<Switch {...label} defaultChecked color="default" />
<PinkSwitch {...label} defaultChecked />

<Switch {...label} defaultChecked />
<Switch {...label} defaultChecked color="secondary" />
<Switch {...label} defaultChecked color="warning" />
<Switch {...label} defaultChecked color="default" />
<PinkSwitch {...label} defaultChecked />

按下 Enter 鍵開始編輯

受控

您可以使用 checked 和 onChange 屬性來控制開關

<Switch
  checked={checked}
  onChange={handleChange}
  inputProps={{ 'aria-label': 'controlled' }}
/>

<Switch
  checked={checked}
  onChange={handleChange}
  inputProps={{ 'aria-label': 'controlled' }}
/>

按下 Enter 鍵開始編輯

搭配 FormGroup 的開關

FormGroup 是一個有用的包裝器，用於將選擇控制元件分組，提供更簡便的 API。然而，如果需要多個相關的控制項，建議您改用核取方塊。(請參閱：何時使用)。

指派責任

吉拉德·格雷傑森·基利安安托萬·洛爾卡

請注意

客製化

以下是一些客製化元件的範例。您可以在覆寫文件頁面中了解更多相關資訊。

MUI 開關Android 12iOS 風格

關

開

🎨 如果您正在尋找靈感，可以查看 MUI Treasury 的客製化範例。

標籤位置

您可以變更標籤的位置

標籤位置

下方尾端

何時使用

核取方塊 vs. 開關

無障礙功能

它將渲染一個具有 checkbox 角色而非 switch 角色的元素，因為此角色尚未獲得廣泛支援。請先測試目標受眾的輔助技術是否正確支援此角色。然後您可以使用 <Switch inputProps={{ role: 'switch' }}> 變更角色
所有表單控制項都應具有標籤，包括單選按鈕、核取方塊和開關。在大多數情況下，這可以透過使用 <label> 元素 (FormControlLabel) 來完成。
當無法使用標籤時，有必要直接將屬性新增至輸入元件。在這種情況下，您可以透過 inputProps 屬性套用額外的屬性 (例如 aria-label、aria-labelledby、title)。

<Switch value="checkedA" inputProps={{ 'aria-label': 'Switch A' }} />

無樣式

使用 Base UI Switch 完全掌控元件的設計，無需覆寫 Material UI 或 Joy UI 的樣式。此元件的無樣式版本是高度客製化的理想選擇，且捆綁包大小更小。

API

請參閱以下文件，以取得此處提及之元件的所有屬性和類別的完整參考。