跳转到内容

Switch 开关

开关控制是改变单个设置状态打开或关闭的控件。

Switches 是在移动设备上调整设置的首选方式。 开关控制的选项,以及它当前所处的状态都应该从相应的描述标签中明确说明。

基本开关

带有 FormControlLabel 的开关

借助 FormControlLabel 组件,可以为 Switch 提供一组描述。

带有 FormControlLabel 的开关组

FormGroup提供相对简单的 API 对选择控件进行分组。 但是,如果需要多个相关控件,建议改用 Checkboxes 。 (参见: When to use)。

Assign responsibility

Be careful

自定义样式开关

这是一些自定义样式开关的例子 您可以在样式重写文档页中了解有关此内容的更多信息。

🎨如果你是在寻找灵感,你可以查看 MUI Treasury's customization examples

尺寸

想要使用外观看起来比较小的开关组件 我们提供了 size 这个属性供您调整。

<FormGroup>
  <FormControlLabel
    control={<Switch size="small" checked={checked} onChange={toggleChecked} />}
    label="Small"
  />
  <FormControlLabel
    control={<Switch checked={checked} onChange={toggleChecked} />}
    label="Normal"
  />
</FormGroup>

标签放置

你可以更改标签的位置:

什么时候使用

可及性

  • 它将渲染一个带有 role=checkbox 而不是 role=switch 的元素,但该属性尚未得到广泛支持。 请首先测试目标受众的辅助技术 (assistive technology) 是否正确支持此 role 属性。 或者您可以使用 <Switch inputProps={{ role: 'switch' }}> 来更改 role 属性。
  • 所有表单控件都应该带有标签,而这包括了单选按钮,复选框和开关。 在大多数情况下,这是通过使用一个 <label> 元素(FormControlLabel)实现的。
  • 如果无法使用标签,您则必须在输入组件中直接添加属性。 在这种情况下,您可以经由 inputProps 属性,来附着一些额外的属性(例如 arial-labelaria-labelledbytitle)。
<Switch value="checkedA" inputProps={{ 'aria-label': 'Switch A' }} />