开关

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

开关是在移动设备上调整设置的首选方式。开关控制的选项及其状态应通过相应的内联标签清楚地说明。

基本开关

<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

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