#ToggleSwitch

Source | Original component

A toggle switch. It has no text label of its own — when you need one, wrap it with FieldLayout.

#Basic usage

The on/off state uses the checked / defaultChecked / onChange channels, and onChange's first argument is the new boolean state.

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>Current state: {on ? "on" : "off"}</div>
      <ToggleSwitch defaultChecked />
    </div>
  );
}

export default App;

#With FieldLayout

Give the field its text label through FieldLayout. Clicking the label flips the switch directly and focuses it (unlike most fields where clicking the label only focuses the control — this is ToggleSwitchWidget's overridden behavior in the original).

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

function App() {
  return (
    <div style={{ maxWidth: 280 }}>
      <FieldLayout label="Email notifications" align="inline">
        <ToggleSwitch defaultChecked />
      </FieldLayout>
    </div>
  );
}

export default App;

#Interaction

• Click (left button only) toggles; after focusing with Tab, use Space / Enter to toggle.
• disabled outputs aria-disabled (not the native disabled); the switch then can't be clicked or focused, and clicking the label won't flip it either.

#API

There is no children, label or icon slot — the switch is a purely graphical control, and any text goes through FieldLayout. onClick / onKeyDown are used internally for toggling and cannot be overridden.

#See also

• The button-form toggle: ToggleButton
• Laying out a labeled field: FieldLayout
• Where the checked channel sits: Controlled and uncontrolled