Switch 开关

控制切换后立即生效的二元设置。

Beta

示例

直接操作示例,查看组件在具体任务中的状态与反馈。

切换后立即更新宿主本地设置并回报结果;组织锁定项保持不可用。
即时生效设置
紧凑通知已开启;运行日志已隐藏;自动保存已开启
不可用设置
开关尺寸适配紧凑列表、常规设置和高触达区域。
禁用开关保留当前状态,并通过说明交代不可修改原因。

使用建议

切换后立即生效

Switch 表示当前设置状态,操作后应立即产生结果;需要最后提交的选择使用 Checkbox。

用陈述句命名设置

标签描述开启状态,例如“自动保存草稿”,避免使用含糊的“启用”或“关闭”。

说明受管策略

禁用时通过 description 解释权限或组织策略,避免让用户猜测为何无法操作。

引入方式

从已验证的公开子路径导入组件;全局样式接入方式见安装指南。

import { BaseSwitch } from '@inf-monkeys-tech/monkeys-design/components/base';

当前限制

  • Switch 不持久化设置,也不处理保存失败后的回滚;宿主需要同步受控值并向用户反馈结果。
  • Deterministic visual evidence and final packed React 18/19 checks are pending T17/T23.
export interface BaseSwitchProps
  extends Omit<
    InputHTMLAttributes<HTMLInputElement>,
    'children' | 'className' | 'disabled' | 'style' | 'type'
  > {
  label?: ReactNode;
  description?: ReactNode;
  disabled?: boolean;
  controlSize?: BaseControlSize;
  appearance?: BaseAppearance;
  className?: string;
  classNames?: BaseSwitchClassNames;
  style?: CSSProperties;
}
属性说明类型默认值
label开关旁显示并说明开关含义的标签内容。ReactNode
description用于补充标题或标签含义的说明内容。ReactNode
disabled是否禁用该组件及其可交互行为。booleanfalse
controlSize内部表单控件使用的预设尺寸。BaseControlSize
appearance覆盖组件使用的外观令牌或局部样式配置。BaseAppearance
className追加到组件根元素的 CSS 类名。string
classNames按组件公开的结构插槽分别追加 CSS 类名。BaseSwitchClassNames
style追加到组件根元素的内联样式。CSSProperties