开关就绪 Storybook
Switch
组件用于在两种状态之间切换,通常代表开启/关闭或启用/禁用状态。
何时使用
当你需要向用户提供在两种状态之间切换的能力时,例如启用或禁用某个功能、设置偏好或做出二元选择时,可以使用 Switch
组件。
开关会立即触发更改。如果你的组件只应在提交表单后才触发更改,那么最好改用 RadioButtonGroup
或 Checkbox
。
此外,开关不能分组——每个 Switch
都会触发独立的状态更新。如果你想要多个互斥的选择,RadioButtonGroup
是更好的选择。要在同一组或上下文中提供多个非互斥的选择,请改用 Checkbox
。
实现 / 选项
属性
Switch
组件接受以下属性
value
(布尔值, 可选): 设置开关的初始值。当为 true 时,开关处于“开启”状态;当为 false 时,处于“关闭”状态。transparent
(布尔值, 可选): 使开关的背景和边框透明,以便于内联使用。invalid
(布尔值, 可选): 在输入周围显示无效状态,通常用于指示错误。
示例用法
开关
加载中...
实时编辑器
<Switch invalid={false} label="Toggle feature" disabled={false} />
内联开关
加载中...
实时编辑器
<InlineSwitch />