开关

开关用于切换单个设置的开启或关闭状态。

简介

开关在移动设备上非常常用于调整设置。开关控制的选项及其所处的状态应通过相应的内联标签明确说明。

组件

在安装后，您可以开始使用以下基本元素构建此组件

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

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

受控

要创建受控开关，请使用 checked 和 onChange props。

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

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

按 Enter 开始编辑

装饰器

要插入图标装饰器，请使用 startDecorator 和/或 endDecorator props。

轨道子元素

使用 slotProps prop 定位轨道的子元素，以在其内部显示文本。

开关

滑块子元素

与上述类似，定位滑块的子元素以在其内部显示图标。

<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 prop 和主题上自定义组件。

<Switch />

CSS 变量

--Switch-gap

常用示例

Fluent UI

以下是如何自定义 Joy UI 的 Switch 使其看起来像 Microsoft 的 Fluent UI

未选中状态：outlined variant 和 neutral 颜色。
选中状态：solid variant 和 primary 颜色。

iOS

请注意我们如何使用 :active 伪类来复制小的滑块尺寸增加，这会在您按下并按住开关时发生。

Strapi

Chakra UI

Tailwind UI

Mantine

可访问性

以下是一些确保您的开关组件可访问的技巧

Switch 将使用 checkbox role 而不是 switch 进行渲染。这主要是因为后者尚未得到广泛支持。但是，如果您认为您的受众会支持它，请务必使用辅助技术进行测试。使用 slotProps prop 来更改 role
```
<Switch slotProps={{ input: { role: 'switch' } }}>
```
每个表单控件组件都应具有适当的标签。这包括单选按钮、复选框和开关。在大多数情况下，这是使用 <label> 元素完成的。
- 如果无法应用标签，请确保在 slotProps prop 内的 input slot 中添加属性（例如 aria-label、aria-labelledby、title）。
```
<Switch value="checkedA" slotProps={{ 'aria-label': 'Switch A' }} />
```

无样式

使用 Base UI Switch 完全拥有组件的设计，而无需覆盖 Material UI 或 Joy UI 样式。此组件的无样式版本是重度自定义的理想选择，且捆绑包大小更小。

API

请参阅下面的文档，以获取此处提到的组件的所有可用 props 和类的完整参考。

<Switch />