開關

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

簡介

開關非常常用於調整行動裝置上的設定。開關控制的選項及其所處的狀態，應從對應的內嵌標籤中清楚顯示。

元件

在安裝之後，您可以使用以下基本元素開始建構此元件

import Switch from '@mui/joy/Switch';

export default function MyApp() {
  return <Switch />;
}

受控

若要建立受控開關，請使用 checked 和 onChange 屬性。

<Switch
  checked={checked}
  onChange={(event) => setChecked(event.target.checked)}
/>

<Switch
  checked={checked}
  onChange={(event) => setChecked(event.target.checked)}
/>

按下 Enter 以開始編輯

裝飾器

若要插入圖示裝飾器，請使用 startDecorator 和/或 endDecorator 屬性。

軌道子元素

使用 slotProps 屬性來定位軌道的子元素，以便在其內部顯示文字。

開啟關閉

滑塊子元素

與上述類似，定位滑塊的子元素，以便在其內部顯示圖示。

<Switch
  size="lg"
  slotProps={{
    input: { 'aria-label': 'Dark mode' },
    thumb: {
      children: <DarkMode />,
    },
  }}
  sx={{ '--Switch-thumbSize': '16px' }}
/>

<Switch
  size="lg"
  slotProps={{
    input: { 'aria-label': 'Dark mode' },
    thumb: {
      children: <DarkMode />,
    },
  }}
  sx={{ '--Switch-thumbSize': '16px' }}
/>

按下 Enter 以開始編輯

CSS 變數 Playground

玩轉開關元件中所有可用的 CSS 變數，看看設計如何變化。

您可以使用這些變數在 sx 屬性和主題中自訂元件。

<Switch />

CSS 變數

--Switch-gap

常見範例

Fluent UI

以下說明如何自訂 Joy UI 的 Switch，使其看起來像 Microsoft 的 Fluent UI

未選取狀態：outlined 變體和 neutral 顏色。
選取狀態：solid 變體和 primary 顏色。

iOS

請注意我們如何使用 :active 虛擬類別來複製小滑塊尺寸增加的效果，這會在您按住開關時發生。

Strapi

Chakra UI

Tailwind UI

Mantine

無障礙設計

以下是一些確保您的開關元件具有無障礙功能的提示

Switch 將使用 checkbox 角色而非 switch 角色呈現。這主要是因為後者尚未被廣泛支援。但是，如果您認為您的受眾將支援它，請務必使用輔助技術進行測試。使用 slotProps 屬性來變更角色
```
<Switch slotProps={{ input: { role: 'switch' } }}>
```
每個表單控制元件都應具有適當的標籤。這包括單選按鈕、核取方塊和開關。在大多數情況下，這是使用 <label> 元素完成的。
- 如果無法套用標籤，請務必將屬性（例如 aria-label、aria-labelledby、title）新增至 slotProps 屬性內的 input slot。
```
<Switch value="checkedA" slotProps={{ 'aria-label': 'Switch A' }} />
```

無樣式

使用 Base UI Switch 完全掌控元件的設計，沒有 Material UI 或 Joy UI 樣式需要覆寫。此元件的無樣式版本是高度自訂的理想選擇，且套件大小更小。

API

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

<Switch />