ToggleSwitch 开关

源代码 | 原版组件

拨动开关。不自带文字标签，需要标签时交给 FieldLayout 包裹。

基本用法

开/关状态走 checked / defaultChecked / onChange 三条通道，onChange 的第一个参数是新的开关布尔值。

当前状态：开

import { useState } from "react";
import { ToggleSwitch } from "ooui-react";

function App() {
  const [on, setOn] = useState(true);

  return (
    <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 12 }}>
      <ToggleSwitch checked={on} onChange={setOn} />
      <div>当前状态：{on ? "开" : "关"}</div>
      <ToggleSwitch defaultChecked />
    </div>
  );
}

export default App;

与 FieldLayout 配合

字段文字标签交给 FieldLayout。点击标签会直接翻转开关并聚焦（与多数“点标签聚焦控件”的字段不同，这是原版 ToggleSwitchWidget 的覆写行为）。

接收邮件通知

import { ToggleSwitch, FieldLayout } from "ooui-react";

function App() {
  return (
    <div style={{ maxWidth: 280 }}>
      <FieldLayout label="接收邮件通知" align="inline">
        <ToggleSwitch defaultChecked />
      </FieldLayout>
    </div>
  );
}

export default App;

交互

点击（仅左键）切换；Tab 聚焦后可用 Space / Enter 切换。
disabled 输出 aria-disabled（不用原生 disabled），此时不可点击、不可聚焦，点标签也不翻转。

API

属性	描述	类型	默认值
`checked`	是否开启（受控，传入即受控模式）	`boolean`	—
`defaultChecked`	非受控初始开关态	`boolean`	`false`
`onChange`	开关状态变更回调（仅回传新状态）	`(checked: boolean) => void`	—
`disabled`	是否禁用	`boolean`	`false`
`tabIndex`	Tab 序	`number \| null`	`0`
`...rest`	原生 `div` 属性（`className`、`id`、`aria-*` 等）直传根元素	`HTMLAttributes<HTMLDivElement>`	—

本组件没有 children、label、icon 落点——开关是纯图形控件，文字说明交给 FieldLayout。onClick / onKeyDown 由组件承载切换逻辑，不接受外部覆盖。

另见

按钮形态的切换控件：ToggleButton
带标签字段的排版：FieldLayout
勾选通道的定位：受控与非受控

#ToggleSwitch 开关

#基本用法

#与 FieldLayout 配合

#交互

#API

#另见

ToggleSwitch 开关

基本用法

与 FieldLayout 配合

交互

API

另见