跳转到内容
编辑此页面

Switch 开关组件

开关控制能切换单个设置的开/关两个状态。

开关组件是在移动设备上调整设置的首选方式。 The option that the switch controls, as well as the state it's in, should be made clear from the corresponding inline label.

基本的开关

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

标签

You can provide a label to the Switch thanks to the FormControlLabel component.

<FormGroup>
  <FormControlLabel control={<Switch defaultChecked />} label="Label" />
  <FormControlLabel disabled control={<Switch />} label="Disabled" />
</FormGroup>

Size 大小

Use the size prop to change the size of the switch.

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

Color 颜色

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

Controlled

You can control the switch with the checked and onChange props:

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

带有 FormGroup 的开关

FormGroup 会提供相对简单的 API 对选择控件进行分组。 但是，如果需要操作多个相关的控件，我们鼓励您使用 Checkboxes 来代替它。 (参见: 何时使用)。

Assign responsibility

Be careful

自定义样式开关

你可以参考以下一些例子来自定义组件。 您可以在 重写文档页面 中了解更多有关此内容的信息。

Off

On

🎨 如果您还在寻找灵感，您可以查看一下 MUI Treasury 自定义的例子。

标签放置

你可以更改标签的位置：

Label placement

何时使用

无障碍设计

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

API