跳到主要内容

开关
就绪
Storybook

Switch 组件用于在两种状态之间切换,通常代表开启/关闭或启用/禁用状态。

何时使用

当你需要向用户提供在两种状态之间切换的能力时,例如启用或禁用某个功能、设置偏好或做出二元选择时,可以使用 Switch 组件。

开关会立即触发更改。如果你的组件只应在提交表单后才触发更改,那么最好改用 RadioButtonGroupCheckbox

此外,开关不能分组——每个 Switch 都会触发独立的状态更新。如果你想要多个互斥的选择,RadioButtonGroup 是更好的选择。要在同一组或上下文中提供多个非互斥的选择,请改用 Checkbox

实现 / 选项

属性

Switch 组件接受以下属性

  • value (布尔值, 可选): 设置开关的初始值。当为 true 时,开关处于“开启”状态;当为 false 时,处于“关闭”状态。
  • transparent (布尔值, 可选): 使开关的背景和边框透明,以便于内联使用。
  • invalid (布尔值, 可选): 在输入周围显示无效状态,通常用于指示错误。

示例用法

开关

加载中...
实时编辑器
<Switch invalid={false} label="Toggle feature" disabled={false} />

内联开关

加载中...
实时编辑器
<InlineSwitch />

演练场