Leaf UI
  • 简体中文

      • Switch 开关

      用于即时开启或关闭某个设置。

      基础状态

      loading 显示加载图标并阻止交互，可用于异步保存期间避免重复操作。

      交互预览基础状态
      basic.tsx
      import { Switch } from '@sudden3/leaf-ui';

export function SwitchBasic() {
  return (
    <>
      <Switch defaultChecked>开启通知</Switch>
      <Switch>自动保存</Switch>
      <Switch disabled defaultChecked>
        已锁定
      </Switch>
      <Switch loading>正在保存设置</Switch>
    </>
  );
}

      受控与尺寸

      通过 checked / onChange 管理开关状态，size 调整大小。

      交互预览受控与尺寸
      邮件通知已开启
      controlled.tsx
      import { Switch } from '@sudden3/leaf-ui';
import { useState } from 'react';

export function SwitchControlled() {
  const [checked, setChecked] = useState(true);
  return (
    <div className="leaf-demo-stack">
      <Switch checked={checked} onChange={(event) => setChecked(event.target.checked)}>
        接收邮件
      </Switch>
      <span className="leaf-demo-note" aria-live="polite">
        {checked ? '邮件通知已开启' : '邮件通知已关闭'}
      </span>
      <div className="leaf-demo-row">
        <Switch size="sm" defaultChecked>
          小尺寸
        </Switch>
        <Switch defaultChecked>默认尺寸</Switch>
        <Switch size="lg" defaultChecked>
          大尺寸
        </Switch>
      </div>
    </div>
  );
}

      Switch API

      属性类型默认值说明
      checked / defaultCheckedboolean—受控状态 / 非受控初始状态
      onChangeChangeEventHandler<HTMLInputElement>—从 event.target.checked 读取开关状态
      size'sm' | 'md' | 'lg''md'开关尺寸
      loadingbooleanfalse显示加载状态并禁用交互
      disabledbooleanfalse禁用交互
      childrenReactNode—可点击的文字标签
      refRef<HTMLInputElement>—开关引用

      支持 name、value、required、form 等原生属性。未开启或被禁用的开关不参与原生表单提交。没有文字时使用 aria-label；className 与 style 作用于标签容器。

      类型

      可导入 SwitchProps 定义组件属性，或使用尺寸类型：

      import type { SwitchProps, ControlSize } from '@sudden3/leaf-ui';