Update settings toggles to use consistent design across app. (#30169)

* Use EditInPlace for identity server picker. * Update test * Add a test for setting an ID server. * fix tests * Reformat other :not sections * forgot a comma * Update Apperance settings to use toggle switches. * Remove unused checkbox setting. * Remove unused import. * Update tests * lint * update apperance screenshot * Begin replacing settings * Refactor RoomPublishSetting * Remove LabelledToggleSwitch * Refactor SettingsFlag to use SettingsToggleInput * Refactor CreateRoomDialog to use SettingsToggleInput * Refactor DeclineAndBlockInviteDialog to use SettingsToggleInput * Update DevtoolsDialog * Refactor ReportRoomDialog to use SettingsToggle * Update RoomUpgradeWarningDialog to use SettingsToggleInput * Update WidgetCapabilitiesPromptDialog to use SettingsToggleInput * Update trivial switchovers * Update Notifications settings to use SettingsFlag where possible * Update RoomPublishSetting and SpaceSettingVisibilityTab to use SettingsToggleInput with a warning * revert changes to field * Updated screenshots * Prevent accidental submits * Replace test ID tests * Create new snapshot tests * Add screenshot test for DeclineAndBlockDialog * Add screenshot for create room dialog. * Add devtools test * Add upgrade rooms test * Add widget capabilites prompt test * Fix spec * Add a test for the live location sharing prompt. * fix copyright * Add tests for notification settings * Add tests for user security tab. * Add test for room security tab. * Add test for video settings tab. * remove .only * Test creating a video room * Mask the IM name in the header. * Add spaces vis tab test. * Fixup unit tests to check correct attributes. * Various fixes to components for tests. * lint * Update compound * update setting names * Cleanup tests prettier Updates some more playwright tests Update more snapshots Update switch more fixes drop .only last screenshot round fix video room flake Remove console.logs Remove roomId from devtools view. lint final screenshot * Add playwright tests * import pages/ remove duplicate create-room * Update screenshots * Fix accessibility for devtools * Disable region test * Fixup headers * remove extra test * Fix permissions dialog * fixup tests * update snapshot * Update jest tests * Clear up playwright tests * update widget screenshot * Fix wrong snaps from using wrong compound version * Revert mistaken s/checkbox/switch/ * lint lint * Update headings * fix snap * remove unused * update snapshot * update tab screenshot * Update snapshots * Fix margins * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Delint Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2025-12-04 15:46:21 +00:00
parent f84e2815d0
commit a2f5c49438
93 changed files with 5489 additions and 4724 deletions
@@ -7,8 +7,16 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */

-import React, { type JSX, type ChangeEvent, createRef, type KeyboardEvent, type SyntheticEvent } from "react";
+import React, {
+    type JSX,
+    type ChangeEvent,
+    createRef,
+    type KeyboardEvent,
+    type SyntheticEvent,
+    type ChangeEventHandler,
+} from "react";
 import { type Room, RoomType, JoinRule, Preset, Visibility } from "matrix-js-sdk/src/matrix";
+import { Form, SettingsToggleInput } from "@vector-im/compound-web";

 import SdkConfig from "../../../SdkConfig";
 import withValidation, { type IFieldState, type IValidationResult } from "../elements/Validation";
@@ -17,7 +25,6 @@ import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { checkUserIsAllowedToChangeEncryption, type IOpts } from "../../../createRoom";
 import Field from "../elements/Field";
 import RoomAliasField from "../elements/RoomAliasField";
-import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
 import DialogButtons from "../elements/DialogButtons";
 import BaseDialog from "../dialogs/BaseDialog";
 import JoinRuleDropdown from "../elements/JoinRuleDropdown";
@@ -25,7 +32,6 @@ import { getKeyBindingsManager } from "../../../KeyBindingsManager";
 import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
 import { privateShouldBeEncrypted } from "../../../utils/rooms";
 import SettingsStore from "../../../settings/SettingsStore";
-import LabelledCheckbox from "../elements/LabelledCheckbox";
 import { UIFeature } from "../../../settings/UIFeature";

 interface IProps {
@@ -226,8 +232,8 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
        this.setState({ joinRule });
    };

-    private onEncryptedChange = (isEncrypted: boolean): void => {
-        this.setState({ isEncrypted });
+    private onEncryptedChange: ChangeEventHandler<HTMLInputElement> = (evt): void => {
+        this.setState({ isEncrypted: evt.target.checked });
    };

    private onAliasChange = (alias: string): void => {
@@ -238,8 +244,8 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
        this.setState({ detailsOpen: (ev.target as HTMLDetailsElement).open });
    };

-    private onNoFederateChange = (noFederate: boolean): void => {
-        this.setState({ noFederate });
+    private onNoFederateChange: ChangeEventHandler<HTMLInputElement> = (evt): void => {
+        this.setState({ noFederate: evt.target.checked });
    };

    private onNameValidate = async (fieldState: IFieldState): Promise<IValidationResult> => {
@@ -248,8 +254,8 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
        return result;
    };

-    private onIsPublicKnockRoomChange = (isPublicKnockRoom: boolean): void => {
-        this.setState({ isPublicKnockRoom });
+    private onIsPublicKnockRoomChange: ChangeEventHandler<HTMLInputElement> = (evt): void => {
+        this.setState({ isPublicKnockRoom: evt.target.checked });
    };

    private static validateRoomName = withValidation({
@@ -336,11 +342,12 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
        let visibilitySection: JSX.Element | undefined;
        if (this.state.joinRule === JoinRule.Knock) {
            visibilitySection = (
-                <LabelledCheckbox
+                <SettingsToggleInput
+                    name="publish-room"
                    className="mx_CreateRoomDialog_labelledCheckbox"
                    label={_t("room_settings|security|publish_room")}
                    onChange={this.onIsPublicKnockRoomChange}
-                    value={this.state.isPublicKnockRoom}
+                    checked={this.state.isPublicKnockRoom}
                />
            );
        }
@@ -360,16 +367,14 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
                microcopy = _t("settings|security|e2ee_default_disabled_warning");
            }
            e2eeSection = (
-                <React.Fragment>
-                    <LabelledToggleSwitch
-                        label={_t("create_room|encryption_label")}
-                        onChange={this.onEncryptedChange}
-                        value={this.state.isEncrypted}
-                        className="mx_CreateRoomDialog_e2eSwitch" // for end-to-end tests
-                        disabled={!this.state.canChangeEncryption}
-                    />
-                    <p>{microcopy}</p>
-                </React.Fragment>
+                <SettingsToggleInput
+                    name="encryption-toggle"
+                    label={_t("create_room|encryption_label")}
+                    onChange={this.onEncryptedChange}
+                    checked={this.state.isEncrypted}
+                    disabled={!this.state.canChangeEncryption}
+                    helpMessage={microcopy}
+                />
            );
        }

@@ -399,8 +404,8 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
                title={title}
                screenName="CreateRoom"
            >
-                <form onSubmit={this.onOk} onKeyDown={this.onKeyDown}>
-                    <div className="mx_Dialog_content">
+                <div className="mx_Dialog_content">
+                    <Form.Root onSubmit={this.onOk} onKeyDown={this.onKeyDown}>
                        <Field
                            ref={this.nameField}
                            label={_t("common|name")}
@@ -416,21 +421,24 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
                            className="mx_CreateRoomDialog_topic"
                        />

-                        <JoinRuleDropdown
-                            label={_t("create_room|room_visibility_label")}
-                            labelInvite={_t("create_room|join_rule_invite")}
-                            labelKnock={
-                                this.askToJoinEnabled ? _t("room_settings|security|join_rule_knock") : undefined
-                            }
-                            labelPublic={this.allowCreatingPublicRooms ? _t("common|public_room") : undefined}
-                            labelRestricted={
-                                this.supportsRestricted ? _t("create_room|join_rule_restricted") : undefined
-                            }
-                            value={this.state.joinRule}
-                            onChange={this.onJoinRuleChange}
-                        />
+                        <div>
+                            <JoinRuleDropdown
+                                label={_t("create_room|room_visibility_label")}
+                                labelInvite={_t("create_room|join_rule_invite")}
+                                labelKnock={
+                                    this.askToJoinEnabled ? _t("room_settings|security|join_rule_knock") : undefined
+                                }
+                                labelPublic={this.allowCreatingPublicRooms ? _t("common|public_room") : undefined}
+                                labelRestricted={
+                                    this.supportsRestricted ? _t("create_room|join_rule_restricted") : undefined
+                                }
+                                value={this.state.joinRule}
+                                onChange={this.onJoinRuleChange}
+                            />
+
+                            {publicPrivateLabel}
+                        </div>

-                        {publicPrivateLabel}
                        {visibilitySection}
                        {e2eeSection}
                        {aliasField}
@@ -439,18 +447,20 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
                                <summary className="mx_CreateRoomDialog_details_summary">
                                    {this.state.detailsOpen ? _t("action|hide_advanced") : _t("action|show_advanced")}
                                </summary>
-                                <LabelledToggleSwitch
+                                <SettingsToggleInput
+                                    name="unfederated"
                                    label={_t("create_room|unfederated", {
                                        serverName: MatrixClientPeg.safeGet().getDomain(),
                                    })}
                                    onChange={this.onNoFederateChange}
-                                    value={this.state.noFederate}
+                                    checked={this.state.noFederate}
+                                    helpMessage={federateLabel}
                                />
-                                <p>{federateLabel}</p>
+                                z<p>{federateLabel}</p>
                            </details>
                        )}
-                    </div>
-                </form>
+                    </Form.Root>
+                </div>
                <DialogButtons
                    primaryButton={
                        isVideoRoom ? _t("create_room|action_create_video_room") : _t("create_room|action_create_room")
@@ -6,12 +6,11 @@ Please see LICENSE files in the repository root for full details.
 */

 import React, { type ChangeEventHandler, useCallback, useState } from "react";
-import { Field, Label, Root } from "@vector-im/compound-web";
+import { Field, Label, Root, SettingsToggleInput } from "@vector-im/compound-web";

 import { _t } from "../../../languageHandler";
 import BaseDialog from "./BaseDialog";
 import DialogButtons from "../elements/DialogButtons";
-import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";

 interface IProps {
    onFinished: (shouldReject: boolean, ignoreUser: boolean, reportRoom: false | string) => void;
@@ -22,6 +21,14 @@ export const DeclineAndBlockInviteDialog: React.FunctionComponent<IProps> = ({ o
    const [shouldReport, setShouldReport] = useState<boolean>(false);
    const [ignoreUser, setIgnoreUser] = useState<boolean>(false);

+    const onShouldReportChanged = useCallback<ChangeEventHandler<HTMLInputElement>>(
+        (e) => setShouldReport(e.target.checked),
+        [setShouldReport],
+    );
+    const onIgnoreUserChanged = useCallback<ChangeEventHandler<HTMLInputElement>>(
+        (e) => setIgnoreUser(e.target.checked),
+        [setIgnoreUser],
+    );
    const [reportReason, setReportReason] = useState<string>("");
    const reportReasonChanged = useCallback<ChangeEventHandler<HTMLTextAreaElement>>(
        (e) => setReportReason(e.target.value),
@@ -43,17 +50,19 @@ export const DeclineAndBlockInviteDialog: React.FunctionComponent<IProps> = ({ o
        >
            <Root>
                <p>{_t("decline_invitation_dialog|confirm", { roomName })}</p>
-                <LabelledToggleSwitch
+                <SettingsToggleInput
+                    name="ignore-user"
                    label={_t("report_content|ignore_user")}
-                    onChange={setIgnoreUser}
-                    caption={_t("decline_invitation_dialog|ignore_user_help")}
-                    value={ignoreUser}
+                    onChange={onIgnoreUserChanged}
+                    helpMessage={_t("decline_invitation_dialog|ignore_user_help")}
+                    checked={ignoreUser}
                />
-                <LabelledToggleSwitch
+                <SettingsToggleInput
+                    name="report-room"
                    label={_t("action|report_room")}
-                    onChange={setShouldReport}
-                    caption={_t("decline_invitation_dialog|report_room_description")}
-                    value={shouldReport}
+                    onChange={onShouldReportChanged}
+                    helpMessage={_t("decline_invitation_dialog|report_room_description")}
+                    checked={shouldReport}
                />
                <Field name="report-reason" aria-disabled={!shouldReport}>
                    <Label htmlFor="mx_DeclineAndBlockInviteDialog_reason">
@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
 */

 import React, { type JSX, useState } from "react";
+import { Form } from "@vector-im/compound-web";

 import { _t, _td, type TranslationKey } from "../../../languageHandler";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
@@ -101,13 +102,19 @@ const DevtoolsDialog: React.FC<IProps> = ({ roomId, threadRootId, onFinished })
                        })}
                    </div>
                ))}
-                <div>
+                <Form.Root
+                    onSubmit={(evt) => {
+                        evt.preventDefault();
+                        evt.stopPropagation();
+                    }}
+                    className="mx_DevTools_toggleForm"
+                >
                    <h2 className="mx_DevTools_toolHeading">{_t("common|options")}</h2>
                    <SettingsFlag name="developerMode" level={SettingLevel.ACCOUNT} />
                    <SettingsFlag name="showHiddenEventsInTimeline" level={SettingLevel.DEVICE} />
                    <SettingsFlag name="enableWidgetScreenshots" level={SettingLevel.ACCOUNT} />
                    <SettingsField settingKey="Developer.elementCallUrl" level={SettingLevel.DEVICE} />
-                </div>
+                </Form.Root>
            </BaseTool>
        );
    }
@@ -6,7 +6,15 @@ Please see LICENSE files in the repository root for full details.
 */

 import React, { type JSX, type ChangeEventHandler, useCallback, useState } from "react";
-import { Root, Field, Label, InlineSpinner, ErrorMessage, HelpMessage } from "@vector-im/compound-web";
+import {
+    Root,
+    Field,
+    Label,
+    InlineSpinner,
+    ErrorMessage,
+    HelpMessage,
+    SettingsToggleInput,
+} from "@vector-im/compound-web";

 import { _t } from "../../../languageHandler";
 import SdkConfig from "../../../SdkConfig";
@@ -14,7 +22,6 @@ import Markdown from "../../../Markdown";
 import BaseDialog from "./BaseDialog";
 import DialogButtons from "../elements/DialogButtons";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
-import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";

 interface IProps {
    roomId: string;
@@ -33,6 +40,10 @@ export const ReportRoomDialog: React.FC<IProps> = function ({ roomId, onFinished
    const client = MatrixClientPeg.safeGet();

    const onReasonChange = useCallback<ChangeEventHandler<HTMLTextAreaElement>>((e) => setReason(e.target.value), []);
+    const onLeaveRoomChanged = useCallback<ChangeEventHandler<HTMLInputElement>>(
+        (e) => setLeaveRoom(e.target.checked),
+        [setLeaveRoom],
+    );
    const onCancel = useCallback(() => onFinished(false), [onFinished]);
    const onSubmit = useCallback(async () => {
        setBusy(true);
@@ -78,10 +89,11 @@ export const ReportRoomDialog: React.FC<IProps> = function ({ roomId, onFinished
                </Field>
                {adminMessage}
                {busy ? <InlineSpinner /> : null}
-                <LabelledToggleSwitch
+                <SettingsToggleInput
+                    name="leave-room"
                    label={_t("room_list|more_options|leave_room")}
-                    value={leaveRoom}
-                    onChange={setLeaveRoom}
+                    checked={leaveRoom}
+                    onChange={onLeaveRoomChanged}
                />
                <DialogButtons
                    primaryButton={_t("action|send_report")}
@@ -6,12 +6,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */

-import React, { type JSX, type ReactNode, type SyntheticEvent } from "react";
+import React, { type ChangeEventHandler, type JSX, type ReactNode, type SyntheticEvent } from "react";
 import { EventType, JoinRule } from "matrix-js-sdk/src/matrix";
+import { Form, SettingsToggleInput } from "@vector-im/compound-web";

 import { _t } from "../../../languageHandler";
 import SdkConfig from "../../../SdkConfig";
-import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import Modal from "../../../Modal";
 import BugReportDialog from "./BugReportDialog";
@@ -87,8 +87,8 @@ export default class RoomUpgradeWarningDialog extends React.Component<IProps, IS
        this.props.onFinished({ continue: false, invite: false });
    };

-    private onInviteUsersToggle = (inviteUsersToNewRoom: boolean): void => {
-        this.setState({ inviteUsersToNewRoom });
+    private onInviteUsersToggle: ChangeEventHandler<HTMLInputElement> = (evt): void => {
+        this.setState({ inviteUsersToNewRoom: evt.target.checked });
    };

    private openBugReportDialog = (e: SyntheticEvent): void => {
@@ -104,11 +104,19 @@ export default class RoomUpgradeWarningDialog extends React.Component<IProps, IS
        let inviteToggle: JSX.Element | undefined;
        if (this.isInviteOrKnockRoom) {
            inviteToggle = (
-                <LabelledToggleSwitch
-                    value={this.state.inviteUsersToNewRoom}
-                    onChange={this.onInviteUsersToggle}
-                    label={_t("room_settings|advanced|upgrade_warning_dialog_invite_label")}
-                />
+                <Form.Root
+                    onSubmit={(evt) => {
+                        evt.preventDefault();
+                        evt.stopPropagation();
+                    }}
+                >
+                    <SettingsToggleInput
+                        name="room-upgrade-warning"
+                        checked={this.state.inviteUsersToNewRoom}
+                        onChange={this.onInviteUsersToggle}
+                        label={_t("room_settings|advanced|upgrade_warning_dialog_invite_label")}
+                    />
+                </Form.Root>
            );
        }

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */

-import React from "react";
+import React, { type ChangeEventHandler } from "react";
 import {
    type Capability,
    isTimelineCapability,
@@ -15,13 +15,13 @@ import {
    type WidgetKind,
 } from "matrix-widget-api";
 import { lexicographicCompare } from "matrix-js-sdk/src/utils";
+import { Form, SettingsToggleInput } from "@vector-im/compound-web";

 import BaseDialog from "./BaseDialog";
 import { _t } from "../../../languageHandler";
 import { objectShallowClone } from "../../../utils/objects";
 import StyledCheckbox from "../elements/StyledCheckbox";
 import DialogButtons from "../elements/DialogButtons";
-import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
 import { CapabilityText } from "../../../widgets/CapabilityText";

 interface IProps {
@@ -64,8 +64,8 @@ export default class WidgetCapabilitiesPromptDialog extends React.PureComponent<
        this.setState({ booleanStates: newStates });
    };

-    private onRememberSelectionChange = (newVal: boolean): void => {
-        this.setState({ rememberSelection: newVal });
+    private onRememberSelectionChange: ChangeEventHandler<HTMLInputElement> = (evt): void => {
+        this.setState({ rememberSelection: evt.target.checked });
    };

    private onSubmit = async (): Promise<void> => {
@@ -117,7 +117,7 @@ export default class WidgetCapabilitiesPromptDialog extends React.PureComponent<
                onFinished={this.props.onFinished}
                title={_t("widget|capabilities_dialog|title")}
            >
-                <form onSubmit={this.onSubmit}>
+                <Form.Root onSubmit={this.onSubmit}>
                    <div className="mx_Dialog_content">
                        <div className="text-muted">{_t("widget|capabilities_dialog|content_starting_text")}</div>
                        {checkboxRows}
@@ -127,16 +127,16 @@ export default class WidgetCapabilitiesPromptDialog extends React.PureComponent<
                            onPrimaryButtonClick={this.onSubmit}
                            onCancel={this.onReject}
                            additive={
-                                <LabelledToggleSwitch
-                                    value={this.state.rememberSelection}
-                                    toggleInFront={true}
+                                <SettingsToggleInput
+                                    name="remember-selection"
+                                    checked={this.state.rememberSelection}
                                    onChange={this.onRememberSelectionChange}
                                    label={_t("widget|capabilities_dialog|remember_Selection")}
                                />
                            }
                        />
                    </div>
-                </form>
+                </Form.Root>
            </BaseDialog>
        );
    }
@@ -7,12 +7,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */

-import React from "react";
+import React, { type ChangeEventHandler } from "react";
 import { type Widget, type WidgetKind } from "matrix-widget-api";
 import { logger } from "matrix-js-sdk/src/logger";
+import { Form, SettingsToggleInput } from "@vector-im/compound-web";

 import { _t } from "../../../languageHandler";
-import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
 import { OIDCState } from "../../../stores/widgets/WidgetPermissionStore";
 import BaseDialog from "./BaseDialog";
 import DialogButtons from "../elements/DialogButtons";
@@ -61,8 +61,8 @@ export default class WidgetOpenIDPermissionsDialog extends React.PureComponent<I
        this.props.onFinished(allowed);
    }

-    private onRememberSelectionChange = (newVal: boolean): void => {
-        this.setState({ rememberSelection: newVal });
+    private onRememberSelectionChange: ChangeEventHandler<HTMLInputElement> = (evt): void => {
+        this.setState({ rememberSelection: evt.target.checked });
    };

    public render(): React.ReactNode {
@@ -85,12 +85,19 @@ export default class WidgetOpenIDPermissionsDialog extends React.PureComponent<I
                    onPrimaryButtonClick={this.onAllow}
                    onCancel={this.onDeny}
                    additive={
-                        <LabelledToggleSwitch
-                            value={this.state.rememberSelection}
-                            toggleInFront={true}
-                            onChange={this.onRememberSelectionChange}
-                            label={_t("widget|open_id_permissions_dialog|remember_selection")}
-                        />
+                        <Form.Root
+                            onSubmit={(evt) => {
+                                evt.preventDefault();
+                                evt.stopPropagation();
+                            }}
+                        >
+                            <SettingsToggleInput
+                                name="remember-selection"
+                                checked={this.state.rememberSelection}
+                                onChange={this.onRememberSelectionChange}
+                                label={_t("widget|open_id_permissions_dialog|remember_selection")}
+                            />
+                        </Form.Root>
                    }
                />
            </BaseDialog>
@@ -7,9 +7,10 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */

-import React, { useContext, useEffect, useMemo, useState } from "react";
+import React, { type ChangeEventHandler, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { type IContent, type MatrixEvent } from "matrix-js-sdk/src/matrix";
 import classNames from "classnames";
+import { Form, SettingsToggleInput } from "@vector-im/compound-web";

 import { _t, _td } from "../../../../languageHandler";
 import BaseTool, { DevtoolsContext, type IDevtoolsProps } from "./BaseTool";
@@ -19,7 +20,6 @@ import FilteredList from "./FilteredList";
 import Spinner from "../../elements/Spinner";
 import SyntaxHighlight from "../../elements/SyntaxHighlight";
 import { useAsyncMemo } from "../../../../hooks/useAsyncMemo";
-import LabelledToggleSwitch from "../../elements/LabelledToggleSwitch";

 export const StateEventEditor: React.FC<IEditorProps> = ({ mxEvent, onBack }) => {
    const context = useContext(DevtoolsContext);
@@ -116,6 +116,10 @@ const RoomStateExplorerEventType: React.FC<IEventTypeProps> = ({ eventType, onBa
    const [event, setEvent] = useState<MatrixEvent | null>(null);
    const [history, setHistory] = useState(false);
    const [showEmptyState, setShowEmptyState] = useState(true);
+    const onEmptyStateToggled = useCallback<ChangeEventHandler<HTMLInputElement>>(
+        (e) => setShowEmptyState(e.target.checked),
+        [setShowEmptyState],
+    );

    const events = context.room.currentState.events.get(eventType)!;

@@ -157,11 +161,19 @@ const RoomStateExplorerEventType: React.FC<IEventTypeProps> = ({ eventType, onBa
                        <StateEventButton key={stateKey} label={stateKey} onClick={() => setEvent(ev)} />
                    ))}
            </FilteredList>
-            <LabelledToggleSwitch
-                label={_t("devtools|show_empty_content_events")}
-                onChange={setShowEmptyState}
-                value={showEmptyState}
-            />
+            <Form.Root
+                onSubmit={(evt) => {
+                    evt.preventDefault();
+                    evt.stopPropagation();
+                }}
+            >
+                <SettingsToggleInput
+                    name="empty_state_toggle"
+                    label={_t("devtools|show_empty_content_events")}
+                    onChange={onEmptyStateToggled}
+                    checked={showEmptyState}
+                />
+            </Form.Root>
        </BaseTool>
    );
 };
@@ -12,11 +12,11 @@
 import React, { type JSX, useContext, useState } from "react";
 import { type Device, type RoomMember } from "matrix-js-sdk/src/matrix";
 import { type CryptoApi } from "matrix-js-sdk/src/crypto-api";
+import { Form, SettingsToggleInput } from "@vector-im/compound-web";

 import { _t } from "../../../../languageHandler";
 import BaseTool, { DevtoolsContext, type IDevtoolsProps } from "./BaseTool";
 import FilteredList from "./FilteredList";
-import LabelledToggleSwitch from "../../elements/LabelledToggleSwitch";
 import { useAsyncMemo } from "../../../../hooks/useAsyncMemo";
 import CopyableText from "../../elements/CopyableText";
 import E2EIcon from "../../rooms/E2EIcon";
@@ -57,11 +57,21 @@ export const UserList: React.FC<Pick<IDevtoolsProps, "onBack">> = ({ onBack }) =
                    <UserButton key={member.userId} member={member} onClick={() => setMember(member)} />
                ))}
            </FilteredList>
-            <LabelledToggleSwitch
-                label={_t("devtools|only_joined_members")}
-                onChange={setShowOnlyJoined}
-                value={showOnlyJoined}
-            />
+            <Form.Root
+                onSubmit={(evt) => {
+                    evt.preventDefault();
+                    evt.stopPropagation();
+                }}
+            >
+                <SettingsToggleInput
+                    name="only_joined_members"
+                    label={_t("devtools|only_joined_members")}
+                    onChange={(e) => {
+                        setShowOnlyJoined(e.target.checked);
+                    }}
+                    checked={showOnlyJoined}
+                />
+            </Form.Root>
        </BaseTool>
    );
 };
@@ -24,11 +24,13 @@ interface IProps {
    onChange(checked: boolean): void;
    // Optional additional CSS class to apply to the label
    className?: string;
+    // The id for the checkbox
+    id?: string;
 }

-const LabelledCheckbox: React.FC<IProps> = ({ value, label, byline, disabled, onChange, className }) => {
+const LabelledCheckbox: React.FC<IProps> = ({ value, label, byline, disabled, onChange, className, id }) => {
    return (
-        <div className={classnames("mx_LabelledCheckbox", className)}>
+        <div id={id} className={classnames("mx_LabelledCheckbox", className)}>
            <StyledCheckbox
                description={byline}
                disabled={disabled}
@@ -1,83 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2019-2022 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import React, { type FC, useId } from "react";
-import classNames from "classnames";
-
-import ToggleSwitch from "./ToggleSwitch";
-import { Caption } from "../typography/Caption";
-
-interface IProps {
-    // The value for the toggle switch
-    "value": boolean;
-    // The translated label for the switch
-    "label": string;
-    // The translated caption for the switch
-    "caption"?: string;
-    // Tooltip to display
-    "tooltip"?: string;
-    // Whether or not to disable the toggle switch
-    "disabled"?: boolean;
-    // True to put the toggle in front of the label
-    // Default false.
-    "toggleInFront"?: boolean;
-    // Additional class names to append to the switch. Optional.
-    "className"?: string;
-    // The function to call when the value changes
-    onChange(checked: boolean): void;
-
-    "data-testid"?: string;
-}
-
-const LabelledToggleSwitch: FC<IProps> = ({
-    label,
-    caption,
-    value,
-    disabled,
-    onChange,
-    tooltip,
-    toggleInFront,
-    className,
-    "data-testid": testId,
-}) => {
-    // This is a minimal version of a SettingsFlag
-    const generatedId = useId();
-    const id = `mx_LabelledToggleSwitch_${generatedId}`;
-    let firstPart = (
-        <span className="mx_SettingsFlag_label">
-            <div id={id}>{label}</div>
-            {caption && <Caption id={`${id}_caption`}>{caption}</Caption>}
-        </span>
-    );
-    let secondPart = (
-        <ToggleSwitch
-            checked={value}
-            disabled={disabled}
-            onChange={onChange}
-            tooltip={tooltip}
-            aria-labelledby={id}
-            aria-describedby={caption ? `${id}_caption` : undefined}
-        />
-    );
-
-    if (toggleInFront) {
-        [firstPart, secondPart] = [secondPart, firstPart];
-    }
-
-    const classes = classNames("mx_SettingsFlag", className, {
-        mx_SettingsFlag_toggleInFront: toggleInFront,
-    });
-    return (
-        <div data-testid={testId} className={classes}>
-            {firstPart}
-            {secondPart}
-        </div>
-    );
-};
-
-export default LabelledToggleSwitch;
@@ -7,13 +7,13 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */

-import React from "react";
+import React, { type ChangeEvent } from "react";
 import { secureRandomString } from "matrix-js-sdk/src/randomstring";
+import { SettingsToggleInput } from "@vector-im/compound-web";
+import { logger } from "matrix-js-sdk/src/logger";

 import SettingsStore from "../../../settings/SettingsStore";
 import { _t } from "../../../languageHandler";
-import ToggleSwitch from "./ToggleSwitch";
-import StyledCheckbox from "./StyledCheckbox";
 import { type SettingLevel } from "../../../settings/SettingLevel";
 import { type BooleanSettingKey, defaultWatchManager } from "../../../settings/Settings";

@@ -24,8 +24,6 @@ interface IProps {
    roomId?: string; // for per-room settings
    label?: string;
    isExplicit?: boolean;
-    // XXX: once design replaces all toggles make this the default
-    useCheckbox?: boolean;
    hideIfCannotSet?: boolean;
    onChange?(checked: boolean): void;
 }
@@ -74,14 +72,16 @@ export default class SettingsFlag extends React.Component<IProps, IState> {
        });
    };

-    private onChange = async (checked: boolean): Promise<void> => {
-        await this.save(checked);
-        this.setState({ value: checked });
-        this.props.onChange?.(checked);
-    };
-
-    private checkBoxOnChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
-        this.onChange(e.target.checked);
+    private onChange = async (evt: ChangeEvent<HTMLInputElement>): Promise<void> => {
+        const newValue = evt.target.checked;
+        try {
+            await this.save(newValue);
+        } catch (ex) {
+            logger.info(`Failed to save setting ${this.props.name}`, ex);
+            return;
+        }
+        this.setState({ value: newValue });
+        this.props.onChange?.(newValue);
    };

    private save = async (val?: boolean): Promise<void> => {
@@ -101,45 +101,28 @@ export default class SettingsFlag extends React.Component<IProps, IState> {
        const label = this.props.label ?? SettingsStore.getDisplayName(this.props.name, this.props.level);
        const description = SettingsStore.getDescription(this.props.name);
        const shouldWarn = SettingsStore.shouldHaveWarning(this.props.name);
-
-        if (this.props.useCheckbox) {
-            return (
-                <StyledCheckbox checked={this.state.value} onChange={this.checkBoxOnChange} disabled={disabled}>
-                    {label}
-                </StyledCheckbox>
-            );
-        } else {
-            return (
-                <div className="mx_SettingsFlag">
-                    <label className="mx_SettingsFlag_label" htmlFor={this.id}>
-                        <span className="mx_SettingsFlag_labelText">{label}</span>
-                        {description && (
-                            <div className="mx_SettingsFlag_microcopy">
-                                {shouldWarn
-                                    ? _t(
-                                          "settings|warning",
-                                          {},
-                                          {
-                                              w: (sub) => (
-                                                  <span className="mx_SettingsTab_microcopy_warning">{sub}</span>
-                                              ),
-                                              description,
-                                          },
-                                      )
-                                    : description}
-                            </div>
-                        )}
-                    </label>
-                    <ToggleSwitch
-                        id={this.id}
-                        checked={this.state.value}
-                        onChange={this.onChange}
-                        disabled={disabled}
-                        tooltip={disabled ? SettingsStore.disabledMessage(this.props.name) : undefined}
-                        title={label ?? undefined}
-                    />
-                </div>
-            );
-        }
+        const helpMessage = shouldWarn
+            ? _t(
+                  "settings|warning",
+                  {},
+                  {
+                      w: (sub) => <span className="mx_SettingsTab_microcopy_warning">{sub}</span>,
+                      description,
+                  },
+              )
+            : description;
+        const disabledMessage = SettingsStore.disabledMessage(this.props.name);
+        return (
+            <SettingsToggleInput
+                id={this.id}
+                checked={this.state.value}
+                onChange={disabledMessage ? undefined : this.onChange}
+                name={this.props.name}
+                disabled={disabled}
+                label={label ?? this.props.name}
+                helpMessage={helpMessage as string}
+                disabledMessage={disabledMessage}
+            />
+        );
    }
 }
@@ -6,12 +6,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */

-import React, { useState } from "react";
+import React, { type ChangeEventHandler, type FormEventHandler, useCallback, useState } from "react";
+import { SettingsToggleInput, Form, Button } from "@vector-im/compound-web";

 import { _t } from "../../../languageHandler";
 import StyledLiveBeaconIcon from "../beacon/StyledLiveBeaconIcon";
-import AccessibleButton from "../elements/AccessibleButton";
-import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
 import Heading from "../typography/Heading";

 interface Props {
@@ -20,6 +19,23 @@ interface Props {

 export const EnableLiveShare: React.FC<Props> = ({ onSubmit }) => {
    const [isEnabled, setEnabled] = useState(false);
+
+    const onEnabledChanged = useCallback<ChangeEventHandler<HTMLInputElement>>(
+        (e) => setEnabled(e.target.checked),
+        [setEnabled],
+    );
+
+    const onSubmitForm = useCallback<FormEventHandler>(
+        (evt) => {
+            evt.preventDefault();
+            evt.stopPropagation();
+            if (isEnabled) {
+                onSubmit();
+            }
+        },
+        [isEnabled, onSubmit],
+    );
+
    return (
        <div data-testid="location-picker-enable-live-share" className="mx_EnableLiveShare">
            <StyledLiveBeaconIcon className="mx_EnableLiveShare_icon" />
@@ -27,22 +43,17 @@ export const EnableLiveShare: React.FC<Props> = ({ onSubmit }) => {
                {_t("location_sharing|live_enable_heading")}
            </Heading>
            <p className="mx_EnableLiveShare_description">{_t("location_sharing|live_enable_description")}</p>
-            <LabelledToggleSwitch
-                data-testid="enable-live-share-toggle"
-                value={isEnabled}
-                onChange={setEnabled}
-                label={_t("location_sharing|live_toggle_label")}
-            />
-            <AccessibleButton
-                data-testid="enable-live-share-submit"
-                className="mx_EnableLiveShare_button"
-                element="button"
-                kind="primary"
-                onClick={onSubmit}
-                disabled={!isEnabled}
-            >
-                {_t("action|ok")}
-            </AccessibleButton>
+            <Form.Root onSubmit={onSubmitForm}>
+                <SettingsToggleInput
+                    name="enable-live-share-toggle"
+                    checked={isEnabled}
+                    onChange={onEnabledChanged}
+                    label={_t("location_sharing|live_toggle_label")}
+                />
+                <Button className="mx_EnableLiveShare_button" kind="primary" disabled={!isEnabled}>
+                    {_t("action|ok")}
+                </Button>
+            </Form.Root>
        </div>
    );
 };
@@ -6,10 +6,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */

-import React from "react";
+import React, { type ChangeEventHandler } from "react";
 import { JoinRule, Visibility } from "matrix-js-sdk/src/matrix";
+import { SettingsToggleInput } from "@vector-im/compound-web";
+import { logger } from "matrix-js-sdk/src/logger";

-import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
 import { _t } from "../../../languageHandler";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import DirectoryCustomisations from "../../../customisations/Directory";
@@ -24,6 +25,7 @@ interface IProps {

 interface IState {
    isRoomPublished: boolean;
+    busy: boolean;
 }

 export default class RoomPublishSetting extends React.PureComponent<IProps, IState> {
@@ -32,6 +34,7 @@ export default class RoomPublishSetting extends React.PureComponent<IProps, ISta

        this.state = {
            isRoomPublished: false,
+            busy: false,
        };
    }

@@ -42,19 +45,23 @@ export default class RoomPublishSetting extends React.PureComponent<IProps, ISta
        });
    }

-    private onRoomPublishChange = (): void => {
-        const valueBefore = this.state.isRoomPublished;
-        const newValue = !valueBefore;
-        this.setState({ isRoomPublished: newValue });
+    private onRoomPublishChange: ChangeEventHandler<HTMLInputElement> = async (evt): Promise<void> => {
+        const newValue = evt.target.checked;
+        this.setState({ busy: true });
        const client = MatrixClientPeg.safeGet();

-        client
-            .setRoomDirectoryVisibility(this.props.roomId, newValue ? Visibility.Public : Visibility.Private)
-            .catch(() => {
-                this.showError();
-                // Roll back the local echo on the change
-                this.setState({ isRoomPublished: valueBefore });
-            });
+        try {
+            await client.setRoomDirectoryVisibility(
+                this.props.roomId,
+                newValue ? Visibility.Public : Visibility.Private,
+            );
+            this.setState({ isRoomPublished: newValue });
+        } catch (ex) {
+            logger.error("Error while setting room directory visibility", ex);
+            this.showError();
+        } finally {
+            this.setState({ busy: false });
+        }
    };

    public componentDidMount(): void {
@@ -69,17 +76,26 @@ export default class RoomPublishSetting extends React.PureComponent<IProps, ISta

        const room = client.getRoom(this.props.roomId);
        const isRoomPublishable = room && room.getJoinRule() !== JoinRule.Invite;
+        const canSetCanonicalAlias =
+            DirectoryCustomisations.requireCanonicalAliasAccessToPublish?.() === false ||
+            this.props.canSetCanonicalAlias;

-        const enabled =
-            (DirectoryCustomisations.requireCanonicalAliasAccessToPublish?.() === false ||
-                this.props.canSetCanonicalAlias) &&
-            (isRoomPublishable || this.state.isRoomPublished);
+        let disabledMessage;
+        if (!isRoomPublishable) {
+            disabledMessage = _t("room_settings|general|publish_warn_invite_only");
+        } else if (!canSetCanonicalAlias) {
+            disabledMessage = _t("room_settings|general|publish_warn_no_canonical_permission");
+        }
+
+        const enabled = canSetCanonicalAlias && (isRoomPublishable || this.state.isRoomPublished);

        return (
-            <LabelledToggleSwitch
-                value={this.state.isRoomPublished}
+            <SettingsToggleInput
+                name="room-publish"
+                checked={this.state.isRoomPublished}
                onChange={this.onRoomPublishChange}
-                disabled={!enabled}
+                disabled={!enabled || this.state.busy}
+                disabledMessage={disabledMessage}
                label={_t("room_settings|general|publish_toggle", {
                    domain: client.getDomain(),
                })}
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */

-import React, { type JSX, type ReactNode } from "react";
+import React, { type ChangeEvent, type ChangeEventHandler, type JSX, type ReactNode } from "react";
 import {
    type IAnnotatedPushRule,
    type IPusher,
@@ -19,6 +19,7 @@ import {
    type EmptyObject,
 } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
+import { Form, SettingsToggleInput } from "@vector-im/compound-web";

 import Spinner from "../elements/Spinner";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
@@ -31,7 +32,6 @@ import {
    type VectorPushRuleDefinition,
 } from "../../../notifications";
 import { _t, type TranslatedString } from "../../../languageHandler";
-import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
 import SettingsStore from "../../../settings/SettingsStore";
 import StyledRadioButton from "../elements/StyledRadioButton";
 import { SettingLevel } from "../../../settings/SettingLevel";
@@ -122,9 +122,6 @@ interface IState {
    threepids?: IThreepid[];

    deviceNotificationsEnabled: boolean;
-    desktopNotifications: boolean;
-    desktopShowBody: boolean;
-    audioNotifications: boolean;

    clearingNotifications: boolean;

@@ -194,10 +191,15 @@ const maximumVectorState = (

 const NotificationActivitySettings = (): JSX.Element => {
    return (
-        <div>
+        <Form.Root
+            onSubmit={(evt) => {
+                evt.preventDefault();
+                evt.stopPropagation();
+            }}
+        >
            <SettingsFlag name="Notifications.showbold" level={SettingLevel.DEVICE} />
            <SettingsFlag name="Notifications.tac_only_notifications" level={SettingLevel.DEVICE} />
-        </div>
+        </Form.Root>
    );
 };

@@ -213,9 +215,6 @@ export default class Notifications extends React.PureComponent<EmptyObject, ISta
        this.state = {
            phase: Phase.Loading,
            deviceNotificationsEnabled: SettingsStore.getValue("deviceNotificationsEnabled") ?? true,
-            desktopNotifications: SettingsStore.getValue("notificationsEnabled"),
-            desktopShowBody: SettingsStore.getValue("notificationBodyEnabled"),
-            audioNotifications: SettingsStore.getValue("audioNotificationsEnabled"),
            clearingNotifications: false,
            ruleIdsWithError: {},
        };
@@ -231,18 +230,9 @@ export default class Notifications extends React.PureComponent<EmptyObject, ISta

    public componentDidMount(): void {
        this.settingWatchers = [
-            SettingsStore.watchSetting("notificationsEnabled", null, (...[, , , , value]) =>
-                this.setState({ desktopNotifications: value as boolean }),
-            ),
            SettingsStore.watchSetting("deviceNotificationsEnabled", null, (...[, , , , value]) => {
                this.setState({ deviceNotificationsEnabled: value as boolean });
            }),
-            SettingsStore.watchSetting("notificationBodyEnabled", null, (...[, , , , value]) =>
-                this.setState({ desktopShowBody: value as boolean }),
-            ),
-            SettingsStore.watchSetting("audioNotificationsEnabled", null, (...[, , , , value]) =>
-                this.setState({ audioNotifications: value as boolean }),
-            ),
        ];

        // noinspection JSIgnoredPromiseFromCall
@@ -286,7 +276,7 @@ export default class Notifications extends React.PureComponent<EmptyObject, ISta
        const settingsEvent = cli.getAccountData(getLocalNotificationAccountDataEventType(cli.deviceId));
        if (settingsEvent) {
            const notificationsEnabled = !(settingsEvent.getContent() as LocalNotificationSettings).is_silenced;
-            await this.updateDeviceNotifications(notificationsEnabled);
+            await SettingsStore.setValue("deviceNotificationsEnabled", null, SettingLevel.DEVICE, notificationsEnabled);
        }
    }

@@ -410,7 +400,8 @@ export default class Notifications extends React.PureComponent<EmptyObject, ISta
        });
    }

-    private onMasterRuleChanged = async (checked: boolean): Promise<void> => {
+    private onMasterRuleChanged: ChangeEventHandler<HTMLInputElement> = async (evt): Promise<void> => {
+        const { checked } = evt.target;
        this.setState({ phase: Phase.Persisting });

        const masterRule = this.state.masterPushRule!;
@@ -431,11 +422,8 @@ export default class Notifications extends React.PureComponent<EmptyObject, ISta
        }));
    };

-    private updateDeviceNotifications = async (checked: boolean): Promise<void> => {
-        await SettingsStore.setValue("deviceNotificationsEnabled", null, SettingLevel.DEVICE, checked);
-    };
-
-    private onEmailNotificationsChanged = async (email: string, checked: boolean): Promise<void> => {
+    private onEmailNotificationsChanged = async (email: string, evt: ChangeEvent<HTMLInputElement>): Promise<void> => {
+        const { checked } = evt.target;
        this.setState({ phase: Phase.Persisting });

        try {
@@ -470,18 +458,6 @@ export default class Notifications extends React.PureComponent<EmptyObject, ISta
        }
    };

-    private onDesktopNotificationsChanged = async (checked: boolean): Promise<void> => {
-        await SettingsStore.setValue("notificationsEnabled", null, SettingLevel.DEVICE, checked);
-    };
-
-    private onDesktopShowBodyChanged = async (checked: boolean): Promise<void> => {
-        await SettingsStore.setValue("notificationBodyEnabled", null, SettingLevel.DEVICE, checked);
-    };
-
-    private onAudioNotificationsChanged = async (checked: boolean): Promise<void> => {
-        await SettingsStore.setValue("audioNotificationsEnabled", null, SettingLevel.DEVICE, checked);
-    };
-
    private onRadioChecked = async (rule: IVectorPushRule, checkedState: VectorState): Promise<void> => {
        this.setState(({ ruleIdsWithError }) => ({
            phase: Phase.Persisting,
@@ -663,11 +639,11 @@ export default class Notifications extends React.PureComponent<EmptyObject, ISta

    private renderTopSection(): JSX.Element {
        const masterSwitch = (
-            <LabelledToggleSwitch
-                data-testid="notif-master-switch"
-                value={!this.isInhibited}
+            <SettingsToggleInput
+                checked={!this.isInhibited}
+                name="notif-master-switch"
                label={_t("settings|notifications|enable_notifications_account")}
-                caption={_t("settings|notifications|enable_notifications_account_detail")}
+                helpMessage={_t("settings|notifications|enable_notifications_account_detail")}
                onChange={this.onMasterRuleChanged}
                disabled={this.state.phase === Phase.Persisting}
            />
@@ -681,10 +657,10 @@ export default class Notifications extends React.PureComponent<EmptyObject, ISta
        const emailSwitches = (this.state.threepids || [])
            .filter((t) => t.medium === ThreepidMedium.Email)
            .map((e) => (
-                <LabelledToggleSwitch
-                    data-testid="notif-email-switch"
+                <SettingsToggleInput
+                    name="notif-email-switch"
                    key={e.address}
-                    value={!!this.state.pushers?.some((p) => p.kind === "email" && p.pushkey === e.address)}
+                    checked={!!this.state.pushers?.some((p) => p.kind === "email" && p.pushkey === e.address)}
                    label={_t("settings|notifications|enable_email_notifications", { email: e.address })}
                    onChange={this.onEmailNotificationsChanged.bind(this, e.address)}
                    disabled={this.state.phase === Phase.Persisting}
@@ -695,37 +671,13 @@ export default class Notifications extends React.PureComponent<EmptyObject, ISta
            <SettingsSubsection>
                {masterSwitch}

-                <LabelledToggleSwitch
-                    data-testid="notif-device-switch"
-                    value={this.state.deviceNotificationsEnabled}
-                    label={_t("settings|notifications|enable_notifications_device")}
-                    onChange={(checked) => this.updateDeviceNotifications(checked)}
-                    disabled={this.state.phase === Phase.Persisting}
-                />
+                <SettingsFlag name="deviceNotificationsEnabled" level={SettingLevel.DEVICE} />

                {this.state.deviceNotificationsEnabled && (
                    <>
-                        <LabelledToggleSwitch
-                            data-testid="notif-setting-notificationsEnabled"
-                            value={this.state.desktopNotifications}
-                            onChange={this.onDesktopNotificationsChanged}
-                            label={_t("settings|notifications|enable_desktop_notifications_session")}
-                            disabled={this.state.phase === Phase.Persisting}
-                        />
-                        <LabelledToggleSwitch
-                            data-testid="notif-setting-notificationBodyEnabled"
-                            value={this.state.desktopShowBody}
-                            onChange={this.onDesktopShowBodyChanged}
-                            label={_t("settings|notifications|show_message_desktop_notification")}
-                            disabled={this.state.phase === Phase.Persisting}
-                        />
-                        <LabelledToggleSwitch
-                            data-testid="notif-setting-audioNotificationsEnabled"
-                            value={this.state.audioNotifications}
-                            onChange={this.onAudioNotificationsChanged}
-                            label={_t("settings|notifications|enable_audible_notifications_session")}
-                            disabled={this.state.phase === Phase.Persisting}
-                        />
+                        <SettingsFlag name="notificationsEnabled" level={SettingLevel.DEVICE} />
+                        <SettingsFlag name="notificationBodyEnabled" level={SettingLevel.DEVICE} />
+                        <SettingsFlag name="audioNotificationsEnabled" level={SettingLevel.DEVICE} />
                    </>
                )}

@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import React from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 import { type EmptyObject } from "matrix-js-sdk/src/matrix";
-import { Root, InlineField, Label, ToggleInput } from "@vector-im/compound-web";
+import { Form, SettingsToggleInput } from "@vector-im/compound-web";

 import { _t } from "../../../languageHandler";
 import { IntegrationManagers } from "../../../integrations/IntegrationManagers";
@@ -66,33 +66,31 @@ export default class SetIntegrationManager extends React.Component<EmptyObject,
        if (!SettingsStore.getValue(UIFeature.Widgets)) return null;

        return (
-            <div className="mx_SetIntegrationManager" data-testid="mx_SetIntegrationManager">
+            <Form.Root
+                onSubmit={(evt) => {
+                    evt.preventDefault();
+                    evt.stopPropagation();
+                }}
+                className="mx_SetIntegrationManager"
+                data-testid="mx_SetIntegrationManager"
+            >
                <div className="mx_SettingsFlag">
                    <div className="mx_SetIntegrationManager_heading_manager">
                        <Heading size="3">{_t("integration_manager|manage_title")}</Heading>
-                        <Heading size="4">{managerName}</Heading>
+                        <Heading id="mx_SetIntegrationManager_ManagerName" size="4">
+                            {managerName}
+                        </Heading>
                    </div>
                </div>
-                <SettingsSubsectionText>{bodyText}</SettingsSubsectionText>
+                <SettingsSubsectionText id="mx_SetIntegrationManager_BodyText">{bodyText}</SettingsSubsectionText>
                <SettingsSubsectionText>{_t("integration_manager|explainer")}</SettingsSubsectionText>
-                <Root>
-                    <InlineField
-                        name="enable_im"
-                        control={
-                            <ToggleInput
-                                role="switch"
-                                id="mx_SetIntegrationManager_Toggle"
-                                checked={this.state.provisioningEnabled}
-                                onChange={this.onProvisioningToggled}
-                            />
-                        }
-                    >
-                        <Label htmlFor="mx_SetIntegrationManager_Toggle">
-                            {_t("integration_manager|toggle_label")}
-                        </Label>
-                    </InlineField>
-                </Root>
-            </div>
+                <SettingsToggleInput
+                    name="enable_im"
+                    label={_t("integration_manager|toggle_label")}
+                    checked={this.state.provisioningEnabled}
+                    onChange={this.onProvisioningToggled}
+                />
+            </Form.Root>
        );
    }
 }
@@ -86,6 +86,7 @@ export function NotificationPusherSettings(): JSX.Element {
            <SettingsSubsection
                className="mx_NotificationPusherSettings"
                heading={_t("settings|notifications|email_section")}
+                legacy={false}
            >
                <SettingsSubsectionText className="mx_NotificationPusherSettings_description">
                    {_t("settings|notifications|email_description")}
@@ -109,7 +110,7 @@ export function NotificationPusherSettings(): JSX.Element {
                </SettingsIndent>
            </SettingsSubsection>
            {notificationTargets.length > 0 && (
-                <SettingsSubsection heading={_t("settings|notifications|push_targets")}>
+                <SettingsSubsection heading={_t("settings|notifications|push_targets")} legacy={false}>
                    <ul>
                        {pushers
                            .filter((it) => it.kind !== "email")
@@ -7,11 +7,11 @@ Please see LICENSE files in the repository root for full details.
 */

 import React, { type JSX, useState } from "react";
+import { SettingsToggleInput } from "@vector-im/compound-web";

 import NewAndImprovedIcon from "../../../../../res/img/element-icons/new-and-improved.svg";
 import { useMatrixClientContext } from "../../../../contexts/MatrixClientContext";
 import { useNotificationSettings } from "../../../../hooks/useNotificationSettings";
-import { useSettingValue } from "../../../../hooks/useSettings";
 import { _t } from "../../../../languageHandler";
 import {
    DefaultNotificationSettings,
@@ -19,13 +19,11 @@ import {
 } from "../../../../models/notificationsettings/NotificationSettings";
 import { RoomNotifState } from "../../../../RoomNotifs";
 import { SettingLevel } from "../../../../settings/SettingLevel";
-import SettingsStore from "../../../../settings/SettingsStore";
 import { NotificationLevel } from "../../../../stores/notifications/NotificationLevel";
 import { clearAllNotifications } from "../../../../utils/notifications";
 import AccessibleButton from "../../elements/AccessibleButton";
 import ExternalLink from "../../elements/ExternalLink";
 import LabelledCheckbox from "../../elements/LabelledCheckbox";
-import LabelledToggleSwitch from "../../elements/LabelledToggleSwitch";
 import StyledRadioGroup from "../../elements/StyledRadioGroup";
 import TagComposer from "../../elements/TagComposer";
 import { StatelessNotificationBadge } from "../../rooms/NotificationBadge/StatelessNotificationBadge";
@@ -71,10 +69,6 @@ function useHasUnreadNotifications(): boolean {
 export default function NotificationSettings2(): JSX.Element {
    const cli = useMatrixClientContext();

-    const desktopNotifications = useSettingValue("notificationsEnabled");
-    const desktopShowBody = useSettingValue("notificationBodyEnabled");
-    const audioNotifications = useSettingValue("audioNotificationsEnabled");
-
    const { model, hasPendingChanges, reconcile } = useNotificationSettings(cli);

    const disabled = model === null || hasPendingChanges;
@@ -118,38 +112,25 @@ export default function NotificationSettings2(): JSX.Element {
            )}
            <SettingsSection>
                <div className="mx_SettingsSubsection_content mx_NotificationSettings2_flags">
-                    <LabelledToggleSwitch
+                    <SettingsToggleInput
+                        name="enable_notifications_account"
                        label={_t("settings|notifications|enable_notifications_account")}
-                        value={!settings.globalMute}
+                        checked={!settings.globalMute}
                        disabled={disabled}
-                        onChange={(value) => {
+                        onChange={(evt) => {
                            reconcile({
                                ...model!,
-                                globalMute: !value,
+                                globalMute: !evt.target.checked,
                            });
                        }}
                    />
-                    <LabelledToggleSwitch
-                        label={_t("settings|notifications|enable_desktop_notifications_session")}
-                        value={desktopNotifications}
-                        onChange={(value) =>
-                            SettingsStore.setValue("notificationsEnabled", null, SettingLevel.DEVICE, value)
-                        }
-                    />
-                    <LabelledToggleSwitch
+                    <SettingsFlag name="notificationsEnabled" level={SettingLevel.DEVICE} />
+                    <SettingsFlag
+                        name="notificationBodyEnabled"
                        label={_t("settings|notifications|desktop_notification_message_preview")}
-                        value={desktopShowBody}
-                        onChange={(value) =>
-                            SettingsStore.setValue("notificationBodyEnabled", null, SettingLevel.DEVICE, value)
-                        }
-                    />
-                    <LabelledToggleSwitch
-                        label={_t("settings|notifications|enable_audible_notifications_session")}
-                        value={audioNotifications}
-                        onChange={(value) =>
-                            SettingsStore.setValue("audioNotificationsEnabled", null, SettingLevel.DEVICE, value)
-                        }
+                        level={SettingLevel.DEVICE}
                    />
+                    <SettingsFlag name="audioNotificationsEnabled" level={SettingLevel.DEVICE} />
                </div>
                <SettingsSubsection
                    heading={
@@ -317,6 +298,7 @@ export default function NotificationSettings2(): JSX.Element {
                        label={_t("settings|notifications|notify_mention", {
                            mxid: cli.getUserId()!,
                        })}
+                        id="mx_NotificationSettings2_MentionCheckbox"
                        value={settings.mentions.user}
                        disabled={disabled}
                        onChange={(value) => {
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.

 import classNames from "classnames";
 import React, { type HTMLAttributes } from "react";
-import { Separator } from "@vector-im/compound-web";
+import { Form, Separator } from "@vector-im/compound-web";

 import { SettingsSubsectionHeading } from "./SettingsSubsectionHeading";

@@ -23,6 +23,11 @@ export interface SettingsSubsectionProps extends HTMLAttributes<HTMLDivElement>
     * @default true
     */
    legacy?: boolean;
+
+    /**
+     * Wrap in a Form Root component, for compatibility with compound components.
+     */
+    formWrap?: boolean;
 }

 export const SettingsSubsectionText: React.FC<HTMLAttributes<HTMLDivElement>> = ({ children, ...rest }) => (
@@ -37,31 +42,48 @@ export const SettingsSubsection: React.FC<SettingsSubsectionProps> = ({
    children,
    stretchContent,
    legacy = true,
+    formWrap,
    ...rest
-}) => (
-    <div
-        {...rest}
-        className={classNames("mx_SettingsSubsection", {
-            mx_SettingsSubsection_newUi: !legacy,
-        })}
-    >
-        {typeof heading === "string" ? <SettingsSubsectionHeading heading={heading} /> : <>{heading}</>}
-        {!!description && (
-            <div className="mx_SettingsSubsection_description">
-                <SettingsSubsectionText>{description}</SettingsSubsectionText>
-            </div>
-        )}
-        {!!children && (
-            <div
-                className={classNames("mx_SettingsSubsection_content", {
-                    mx_SettingsSubsection_contentStretch: !!stretchContent,
-                    mx_SettingsSubsection_noHeading: !heading && !description,
-                    mx_SettingsSubsection_content_newUi: !legacy,
-                })}
+}) => {
+    const content = (
+        <div
+            {...rest}
+            className={classNames("mx_SettingsSubsection", {
+                mx_SettingsSubsection_newUi: !legacy,
+            })}
+        >
+            {typeof heading === "string" ? <SettingsSubsectionHeading heading={heading} /> : <>{heading}</>}
+            {!!description && (
+                <div className="mx_SettingsSubsection_description">
+                    <SettingsSubsectionText>{description}</SettingsSubsectionText>
+                </div>
+            )}
+            {!!children && (
+                <div
+                    className={classNames("mx_SettingsSubsection_content", {
+                        mx_SettingsSubsection_contentStretch: !!stretchContent,
+                        mx_SettingsSubsection_noHeading: !heading && !description,
+                        mx_SettingsSubsection_content_newUi: !legacy,
+                    })}
+                >
+                    {children}
+                </div>
+            )}
+            {!legacy && <Separator />}
+        </div>
+    );
+
+    if (formWrap) {
+        return (
+            <Form.Root
+                onSubmit={(evt) => {
+                    evt.preventDefault();
+                    evt.stopPropagation();
+                }}
            >
-                {children}
-            </div>
-        )}
-        {!legacy && <Separator />}
-    </div>
-);
+                {content}
+            </Form.Root>
+        );
+    }
+    return content;
+};
@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { type ContextType } from "react";
 import { type Room } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
+import { Form } from "@vector-im/compound-web";

 import { _t } from "../../../../../languageHandler";
 import RoomProfileSettings from "../../../room_settings/RoomProfileSettings";
@@ -78,26 +79,33 @@ export default class GeneralRoomSettingsTab extends React.Component<IProps, ISta

        return (
            <SettingsTab data-testid="General">
-                <SettingsSection heading={_t("common|general")}>
-                    <RoomProfileSettings roomId={room.roomId} />
-                </SettingsSection>
+                <Form.Root
+                    onSubmit={(evt) => {
+                        evt.preventDefault();
+                        evt.stopPropagation();
+                    }}
+                >
+                    <SettingsSection heading={_t("common|general")}>
+                        <RoomProfileSettings roomId={room.roomId} />
+                    </SettingsSection>

-                <SettingsSection heading={_t("room_settings|general|aliases_section")}>
-                    <AliasSettings
-                        roomId={room.roomId}
-                        canSetCanonicalAlias={canSetCanonical}
-                        canSetAliases={canSetAliases}
-                        canonicalAliasEvent={canonicalAliasEv}
-                    />
-                </SettingsSection>
+                    <SettingsSection heading={_t("room_settings|general|aliases_section")}>
+                        <AliasSettings
+                            roomId={room.roomId}
+                            canSetCanonicalAlias={canSetCanonical}
+                            canSetAliases={canSetAliases}
+                            canonicalAliasEvent={canonicalAliasEv}
+                        />
+                    </SettingsSection>

-                <SettingsSection heading={_t("room_settings|general|other_section")}>
-                    {urlPreviewSettings}
-                    <SettingsSubsection heading={_t("common|moderation_and_safety")} legacy={false}>
-                        <MediaPreviewAccountSettings roomId={room.roomId} />
-                    </SettingsSubsection>
-                    {leaveSection}
-                </SettingsSection>
+                    <SettingsSection heading={_t("room_settings|general|other_section")}>
+                        {urlPreviewSettings}
+                        <SettingsSubsection heading={_t("common|moderation_and_safety")} legacy={false}>
+                            <MediaPreviewAccountSettings roomId={room.roomId} />
+                        </SettingsSubsection>
+                        {leaveSection}
+                    </SettingsSection>
+                </Form.Root>
            </SettingsTab>
        );
    }
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */

-import React, { type JSX, type ReactNode } from "react";
+import React, { type ChangeEventHandler, type JSX, type ReactNode } from "react";
 import {
    GuestAccess,
    HistoryVisibility,
@@ -17,11 +17,10 @@ import {
    EventType,
 } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
-import { InlineSpinner } from "@vector-im/compound-web";
+import { Form, InlineSpinner, SettingsToggleInput } from "@vector-im/compound-web";

 import { Icon as WarningIcon } from "../../../../../../res/img/warning.svg";
 import { _t } from "../../../../../languageHandler";
-import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch";
 import Modal from "../../../../../Modal";
 import QuestionDialog from "../../../dialogs/QuestionDialog";
 import StyledRadioGroup from "../../../elements/StyledRadioGroup";
@@ -184,7 +183,8 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
        });
    };

-    private onGuestAccessChange = (allowed: boolean): void => {
+    private onGuestAccessChange: ChangeEventHandler<HTMLInputElement> = (evt): void => {
+        const allowed = evt.target.checked;
        const guestAccess = allowed ? GuestAccess.CanJoin : GuestAccess.Forbidden;
        const beforeGuestAccess = this.state.guestAccess;
        if (beforeGuestAccess === guestAccess) return;
@@ -464,13 +464,14 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt

        return (
            <div className="mx_SecurityRoomSettingsTab_advancedSection">
-                <LabelledToggleSwitch
-                    value={guestAccess === GuestAccess.CanJoin}
+                <SettingsToggleInput
+                    name="guest-access"
+                    checked={guestAccess === GuestAccess.CanJoin}
                    onChange={this.onGuestAccessChange}
                    disabled={!canSetGuestAccess}
                    label={_t("room_settings|visibility|guest_access_label")}
+                    helpMessage={_t("room_settings|security|guest_access_warning")}
                />
-                <p>{_t("room_settings|security|guest_access_warning")}</p>
            </div>
        );
    }
@@ -503,35 +504,43 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt

        return (
            <SettingsTab>
-                <SettingsSection heading={_t("room_settings|security|title")}>
-                    <SettingsFieldset
-                        legend={_t("settings|security|encryption_section")}
-                        description={
-                            isEncryptionForceDisabled && !isEncrypted
-                                ? undefined
-                                : _t("room_settings|security|encryption_permanent")
-                        }
-                    >
-                        {isEncryptionLoading ? (
-                            <InlineSpinner />
-                        ) : (
-                            <>
-                                <LabelledToggleSwitch
-                                    value={isEncrypted}
-                                    onChange={this.onEncryptionChange}
-                                    label={_t("common|encrypted")}
-                                    disabled={!canEnableEncryption}
-                                />
-                                {isEncryptionForceDisabled && !isEncrypted && (
-                                    <Caption>{_t("room_settings|security|encryption_forced")}</Caption>
-                                )}
-                                {encryptionSettings}
-                            </>
-                        )}
-                    </SettingsFieldset>
-                    {this.renderJoinRule()}
-                    {historySection}
-                </SettingsSection>
+                <Form.Root
+                    onSubmit={(evt) => {
+                        evt.preventDefault();
+                        evt.stopPropagation();
+                    }}
+                >
+                    <SettingsSection heading={_t("room_settings|security|title")}>
+                        <SettingsFieldset
+                            legend={_t("settings|security|encryption_section")}
+                            description={
+                                isEncryptionForceDisabled && !isEncrypted
+                                    ? undefined
+                                    : _t("room_settings|security|encryption_permanent")
+                            }
+                        >
+                            {isEncryptionLoading ? (
+                                <InlineSpinner />
+                            ) : (
+                                <>
+                                    <SettingsToggleInput
+                                        name="enable-encryption"
+                                        checked={isEncrypted}
+                                        onChange={this.onEncryptionChange}
+                                        label={_t("common|encrypted")}
+                                        disabled={!canEnableEncryption}
+                                    />
+                                    {isEncryptionForceDisabled && !isEncrypted && (
+                                        <Caption>{_t("room_settings|security|encryption_forced")}</Caption>
+                                    )}
+                                    {encryptionSettings}
+                                </>
+                            )}
+                        </SettingsFieldset>
+                        {this.renderJoinRule()}
+                        {historySection}
+                    </SettingsSection>
+                </Form.Root>
            </SettingsTab>
        );
    }
@@ -6,12 +6,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */

-import React, { useCallback, useMemo, useState } from "react";
+import React, { type ChangeEventHandler, useCallback, useMemo, useState } from "react";
 import { JoinRule, EventType, type RoomState, type Room } from "matrix-js-sdk/src/matrix";
 import { type RoomPowerLevelsEventContent } from "matrix-js-sdk/src/types";
+import { Form, SettingsToggleInput } from "@vector-im/compound-web";

 import { _t } from "../../../../../languageHandler";
-import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch";
 import { SettingsSubsection } from "../../shared/SettingsSubsection";
 import SettingsTab from "../SettingsTab";
 import { useRoomState } from "../../../../../hooks/useRoomState";
@@ -45,8 +45,9 @@ const ElementCallSwitch: React.FC<ElementCallSwitchProps> = ({ room }) => {
        return content.events?.[ElementCallMemberEventType.name] === 0;
    });

-    const onChange = useCallback(
-        (enabled: boolean): void => {
+    const onChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
+        (evt): void => {
+            const enabled = evt.target.checked;
            setElementCallEnabled(enabled);

            // Take a copy to avoid mutating the original
@@ -73,16 +74,17 @@ const ElementCallSwitch: React.FC<ElementCallSwitchProps> = ({ room }) => {
    const brand = SdkConfig.get("element_call").brand ?? DEFAULTS.element_call.brand;

    return (
-        <LabelledToggleSwitch
-            data-testid="element-call-switch"
+        <SettingsToggleInput
+            name="element-call-switch"
+            data-test-id="element-call-switch"
            label={_t("room_settings|voip|enable_element_call_label", { brand })}
-            caption={_t("room_settings|voip|enable_element_call_caption", {
+            helpMessage={_t("room_settings|voip|enable_element_call_caption", {
                brand,
            })}
-            value={elementCallEnabled}
+            checked={elementCallEnabled}
            onChange={onChange}
            disabled={!maySend}
-            tooltip={_t("room_settings|voip|enable_element_call_no_permissions_tooltip")}
+            disabledMessage={_t("room_settings|voip|enable_element_call_no_permissions_tooltip")}
        />
    );
 };
@@ -95,9 +97,16 @@ export const VoipRoomSettingsTab: React.FC<Props> = ({ room }) => {
    return (
        <SettingsTab>
            <SettingsSection heading={_t("settings|voip|title")}>
-                <SettingsSubsection heading={_t("room_settings|voip|call_type_section")}>
-                    <ElementCallSwitch room={room} />
-                </SettingsSubsection>
+                <Form.Root
+                    onSubmit={(evt) => {
+                        evt.preventDefault();
+                        evt.stopPropagation();
+                    }}
+                >
+                    <SettingsSubsection heading={_t("room_settings|voip|call_type_section")}>
+                        <ElementCallSwitch room={room} />
+                    </SettingsSubsection>
+                </Form.Root>
            </SettingsSection>
        </SettingsTab>
    );
@@ -9,9 +9,9 @@ Please see LICENSE files in the repository root for full details.

 import React, { type ChangeEvent, type ReactNode } from "react";
 import { type EmptyObject } from "matrix-js-sdk/src/matrix";
+import { Form } from "@vector-im/compound-web";

 import { _t } from "../../../../../languageHandler";
-import SdkConfig from "../../../../../SdkConfig";
 import SettingsStore from "../../../../../settings/SettingsStore";
 import SettingsFlag from "../../../elements/SettingsFlag";
 import Field from "../../../elements/Field";
@@ -48,7 +48,6 @@ export default class AppearanceUserSettingsTab extends React.Component<EmptyObje
    private renderAdvancedSection(): ReactNode {
        if (!SettingsStore.getValue(UIFeature.AdvancedSettings)) return null;

-        const brand = SdkConfig.get().brand;
        const toggle = (
            <AccessibleButton
                kind="link"
@@ -62,21 +61,23 @@ export default class AppearanceUserSettingsTab extends React.Component<EmptyObje
        let advanced: React.ReactNode;

        if (this.state.showAdvanced) {
-            const tooltipContent = _t("settings|appearance|custom_font_description", { brand });
            advanced = (
-                <>
-                    <SettingsFlag name="useCompactLayout" level={SettingLevel.DEVICE} useCheckbox={true} />
+                <Form.Root
+                    onSubmit={(evt) => {
+                        evt.preventDefault();
+                        evt.stopPropagation();
+                    }}
+                >
+                    <SettingsFlag name="useCompactLayout" level={SettingLevel.DEVICE} />

                    <SettingsFlag
                        name="useBundledEmojiFont"
                        level={SettingLevel.DEVICE}
-                        useCheckbox={true}
                        onChange={(checked) => this.setState({ useBundledEmojiFont: checked })}
                    />
                    <SettingsFlag
                        name="useSystemFont"
                        level={SettingLevel.DEVICE}
-                        useCheckbox={true}
                        onChange={(checked) => this.setState({ useSystemFont: checked })}
                    />
                    <Field
@@ -89,12 +90,10 @@ export default class AppearanceUserSettingsTab extends React.Component<EmptyObje

                            SettingsStore.setValue("systemFont", null, SettingLevel.DEVICE, value.target.value);
                        }}
-                        tooltipContent={tooltipContent}
-                        forceTooltipVisible={true}
                        disabled={!this.state.useSystemFont}
                        value={this.state.systemFont}
                    />
-                </>
+                </Form.Root>
            );
        }
        return (
@@ -5,15 +5,14 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */

-import React, { type FC, useCallback, useState } from "react";
-import { Root } from "@vector-im/compound-web";
+import React, { type ChangeEvent, type FC, useCallback, useState } from "react";
+import { Form, SettingsToggleInput } from "@vector-im/compound-web";
 import { logger } from "matrix-js-sdk/src/logger";

 import { _t } from "../../../../../languageHandler";
 import { useSettingValue } from "../../../../../hooks/useSettings";
 import SettingsStore from "../../../../../settings/SettingsStore";
 import { SettingLevel } from "../../../../../settings/SettingLevel";
-import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch";

 /**
 * A settings component which allows the user to enable/disable invite blocking.
@@ -31,10 +30,10 @@ export const InviteRulesAccountSetting: FC = () => {
    const [busy, setBusy] = useState(false);

    const onChange = useCallback(
-        async (allowInvites: boolean) => {
+        async (e: ChangeEvent<HTMLInputElement>) => {
            try {
                setBusy(true);
-                if (allowInvites) {
+                if (e.target.checked) {
                    // When allowing invites, clear the block setting on both bits of account data.
                    await SettingsStore.setValue("blockInvites", null, SettingLevel.ACCOUNT, false);
                    await SettingsStore.setValue("inviteRules", null, SettingLevel.ACCOUNT, { allBlocked: false });
@@ -58,15 +57,22 @@ export const InviteRulesAccountSetting: FC = () => {
    const disabledMessage = msc4155Disabled && msc4380Disabled;
    const invitesBlocked = (!msc4155Disabled && msc4155Rules.allBlocked) || (!msc4380Disabled && msc4380BlockInvites);
    return (
-        <Root className="mx_MediaPreviewAccountSetting_Form">
-            <LabelledToggleSwitch
-                className="mx_MediaPreviewAccountSetting_ToggleSwitch"
+        <Form.Root
+            className="mx_MediaPreviewAccountSetting_Form"
+            onSubmit={(evt) => {
+                evt.preventDefault();
+                evt.stopPropagation();
+            }}
+        >
+            <SettingsToggleInput
+                name="invite_controls"
                label={_t("settings|invite_controls|default_label")}
-                value={!invitesBlocked}
+                checked={!invitesBlocked}
                onChange={onChange}
-                tooltip={disabledMessage}
+                className="mx_MediaPreviewAccountSetting_ToggleSwitch"
                disabled={!!disabledMessage || busy}
+                disabledMessage={disabledMessage}
            />
-        </Root>
+        </Form.Root>
    );
 };
@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { type JSX } from "react";
 import { sortBy } from "lodash";
 import { type EmptyObject } from "matrix-js-sdk/src/matrix";
+import { Form } from "@vector-im/compound-web";

 import { _t } from "../../../../../languageHandler";
 import SettingsStore from "../../../../../settings/SettingsStore";
@@ -106,37 +107,44 @@ export default class LabsUserSettingsTab extends React.Component<EmptyObject> {

        return (
            <SettingsTab>
-                <SettingsSection heading={_t("labs|beta_section")}>
-                    <SettingsSubsectionText>
-                        {_t("labs|beta_description", { brand: SdkConfig.get("brand") })}
-                    </SettingsSubsectionText>
-                    {betaSection}
-                </SettingsSection>
-
-                {labsSections && (
-                    <SettingsSection heading={_t("labs|experimental_section")}>
+                <Form.Root
+                    onSubmit={(evt) => {
+                        evt.preventDefault();
+                        evt.stopPropagation();
+                    }}
+                >
+                    <SettingsSection heading={_t("labs|beta_section")}>
                        <SettingsSubsectionText>
-                            {_t(
-                                "labs|experimental_description",
-                                {},
-                                {
-                                    a: (sub) => {
-                                        return (
-                                            <a
-                                                href="https://github.com/vector-im/element-web/blob/develop/docs/labs.md"
-                                                rel="noreferrer noopener"
-                                                target="_blank"
-                                            >
-                                                {sub}
-                                            </a>
-                                        );
-                                    },
-                                },
-                            )}
+                            {_t("labs|beta_description", { brand: SdkConfig.get("brand") })}
                        </SettingsSubsectionText>
-                        {labsSections}
+                        {betaSection}
                    </SettingsSection>
-                )}
+
+                    {labsSections && (
+                        <SettingsSection heading={_t("labs|experimental_section")}>
+                            <SettingsSubsectionText>
+                                {_t(
+                                    "labs|experimental_description",
+                                    {},
+                                    {
+                                        a: (sub) => {
+                                            return (
+                                                <a
+                                                    href="https://github.com/vector-im/element-web/blob/develop/docs/labs.md"
+                                                    rel="noreferrer noopener"
+                                                    target="_blank"
+                                                >
+                                                    {sub}
+                                                </a>
+                                            );
+                                        },
+                                    },
+                                )}
+                            </SettingsSubsectionText>
+                            {labsSections}
+                        </SettingsSection>
+                    )}
+                </Form.Root>
            </SettingsTab>
        );
    }
@@ -6,9 +6,8 @@ Please see LICENSE files in the repository root for full details.
 */

 import React, { type ChangeEventHandler, useCallback } from "react";
-import { Field, HelpMessage, InlineField, Label, RadioInput, Root } from "@vector-im/compound-web";
+import { Field, HelpMessage, InlineField, Label, RadioInput, Root, SettingsToggleInput } from "@vector-im/compound-web";

-import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch";
 import { type MediaPreviewConfig, MediaPreviewValue } from "../../../../../@types/media_preview";
 import { _t } from "../../../../../languageHandler";
 import { useSettingValue } from "../../../../../hooks/useSettings";
@@ -30,12 +29,12 @@ export const MediaPreviewAccountSettings: React.FC<{ roomId?: string }> = ({ roo
        [roomId],
    );

-    const avatarOnChange = useCallback(
-        (c: boolean) => {
+    const avatarOnChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
+        (evt) => {
            changeSetting({
                ...currentMediaPreview,
                // Switch is inverted. "Hide avatars..."
-                invite_avatars: c ? MediaPreviewValue.Off : MediaPreviewValue.On,
+                invite_avatars: evt.target.checked ? MediaPreviewValue.Off : MediaPreviewValue.On,
            });
        },
        [changeSetting, currentMediaPreview],
@@ -83,10 +82,10 @@ export const MediaPreviewAccountSettings: React.FC<{ roomId?: string }> = ({ roo
    return (
        <Root className="mx_MediaPreviewAccountSetting_Form">
            {!roomId && (
-                <LabelledToggleSwitch
-                    className="mx_MediaPreviewAccountSetting_ToggleSwitch"
+                <SettingsToggleInput
+                    name="hide_avatars"
                    label={_t("settings|media_preview|hide_avatars")}
-                    value={currentMediaPreview.invite_avatars === MediaPreviewValue.Off}
+                    checked={currentMediaPreview.invite_avatars === MediaPreviewValue.Off}
                    onChange={avatarOnChange}
                />
            )}
@@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */

 import React from "react";
+import { Form } from "@vector-im/compound-web";

 import { Features } from "../../../../../settings/Settings";
 import SettingsStore from "../../../../../settings/SettingsStore";
@@ -21,13 +22,20 @@ export default class NotificationUserSettingsTab extends React.Component {

        return (
            <SettingsTab>
-                {newNotificationSettingsEnabled ? (
-                    <NotificationSettings2 />
-                ) : (
-                    <SettingsSection>
-                        <Notifications />
-                    </SettingsSection>
-                )}
+                <Form.Root
+                    onSubmit={(evt) => {
+                        evt.preventDefault();
+                        evt.stopPropagation();
+                    }}
+                >
+                    {newNotificationSettingsEnabled ? (
+                        <NotificationSettings2 />
+                    ) : (
+                        <SettingsSection>
+                            <Notifications />
+                        </SettingsSection>
+                    )}
+                </Form.Root>
            </SettingsTab>
        );
    }
@@ -7,7 +7,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */

-import React, { type JSX, type ReactElement, useCallback, useEffect, useState } from "react";
+import React, { type ChangeEvent, type JSX, type ReactElement, useCallback, useEffect, useState } from "react";
+import { SettingsToggleInput } from "@vector-im/compound-web";

 import { type NonEmptyArray } from "../../../../../@types/common";
 import { _t, getCurrentLanguage } from "../../../../../languageHandler";
@@ -29,7 +30,6 @@ import LanguageDropdown from "../../../elements/LanguageDropdown";
 import PlatformPeg from "../../../../../PlatformPeg";
 import { IS_MAC } from "../../../../../Keyboard";
 import SpellCheckSettings from "../../SpellCheckSettings";
-import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch";
 import * as TimezoneHandler from "../../../../../TimezoneHandler";
 import { type BooleanSettingKey } from "../../../../../settings/Settings.tsx";
 import { MediaPreviewAccountSettings } from "./MediaPreviewAccountSettings.tsx";
@@ -92,7 +92,8 @@ const SpellCheckSection: React.FC = () => {
        })();
    }, []);

-    const onSpellCheckEnabledChange = useCallback((enabled: boolean) => {
+    const onSpellCheckEnabledChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+        const enabled = e.target.checked;
        setSpellCheckEnabled(enabled);
        PlatformPeg.get()?.setSpellCheckEnabled(enabled);
    }, []);
@@ -106,10 +107,11 @@ const SpellCheckSection: React.FC = () => {

    return (
        <>
-            <LabelledToggleSwitch
+            <SettingsToggleInput
+                name="allow_spellcheck"
                label={_t("settings|general|allow_spellcheck")}
-                value={Boolean(spellCheckEnabled)}
                onChange={onSpellCheckEnabledChange}
+                checked={Boolean(spellCheckEnabled)}
            />
            {spellCheckEnabled && spellCheckLanguages !== undefined && !IS_MAC && (
                <SpellCheckSettings languages={spellCheckLanguages} onLanguagesChange={onSpellCheckLanguagesChange} />
@@ -261,13 +263,16 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
            <SettingsTab data-testid="mx_PreferencesUserSettingsTab">
                <SettingsSection>
                    {/* The heading string is still 'general' from where it was moved, but this section should become 'general' */}
-                    <SettingsSubsection heading={_t("settings|general|language_section")}>
+                    <SettingsSubsection heading={_t("settings|general|language_section")} formWrap>
                        <LanguageSection />
                        <SpellCheckSection />
                    </SettingsSubsection>

                    {SettingsStore.canSetValue("Electron.autoLaunch", null, SettingLevel.PLATFORM) && (
-                        <SettingsSubsection heading={_t("settings|preferences|startup_window_behaviour_label")}>
+                        <SettingsSubsection
+                            heading={_t("settings|preferences|startup_window_behaviour_label")}
+                            formWrap
+                        >
                            <SettingsDropdown
                                settingKey="Electron.autoLaunch"
                                label={_t("settings|start_automatically|label", { brand })}
@@ -277,7 +282,7 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
                        </SettingsSubsection>
                    )}

-                    <SettingsSubsection heading={_t("settings|preferences|room_list_heading")}>
+                    <SettingsSubsection heading={_t("settings|preferences|room_list_heading")} formWrap>
                        {!newRoomListEnabled && this.renderGroup(PreferencesUserSettingsTab.ROOM_LIST_SETTINGS)}
                        {/* The settings is on device level where the other room list settings are on account level  */}
                        {newRoomListEnabled && (
@@ -285,7 +290,7 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
                        )}
                    </SettingsSubsection>

-                    <SettingsSubsection heading={_t("common|spaces")}>
+                    <SettingsSubsection heading={_t("common|spaces")} formWrap>
                        {this.renderGroup(PreferencesUserSettingsTab.SPACES_SETTINGS, SettingLevel.ACCOUNT)}
                    </SettingsSubsection>

@@ -302,11 +307,12 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
                                ),
                            },
                        )}
+                        formWrap
                    >
                        {this.renderGroup(PreferencesUserSettingsTab.KEYBINDINGS_SETTINGS)}
                    </SettingsSubsection>

-                    <SettingsSubsection heading={_t("settings|preferences|time_heading")}>
+                    <SettingsSubsection heading={_t("settings|preferences|time_heading")} formWrap>
                        <div className="mx_SettingsSubsection_dropdown">
                            {_t("settings|preferences|user_timezone")}
                            <Dropdown
@@ -331,23 +337,24 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
                    <SettingsSubsection
                        heading={_t("common|presence")}
                        description={_t("settings|preferences|presence_description")}
+                        formWrap
                    >
                        {this.renderGroup(PreferencesUserSettingsTab.PRESENCE_SETTINGS)}
                    </SettingsSubsection>

-                    <SettingsSubsection heading={_t("settings|preferences|composer_heading")}>
+                    <SettingsSubsection heading={_t("settings|preferences|composer_heading")} formWrap>
                        {this.renderGroup(PreferencesUserSettingsTab.COMPOSER_SETTINGS)}
                    </SettingsSubsection>

-                    <SettingsSubsection heading={_t("settings|preferences|code_blocks_heading")}>
+                    <SettingsSubsection heading={_t("settings|preferences|code_blocks_heading")} formWrap>
                        {this.renderGroup(PreferencesUserSettingsTab.CODE_BLOCKS_SETTINGS)}
                    </SettingsSubsection>

-                    <SettingsSubsection heading={_t("settings|preferences|media_heading")}>
+                    <SettingsSubsection heading={_t("settings|preferences|media_heading")} formWrap>
                        {this.renderGroup(PreferencesUserSettingsTab.IMAGES_AND_VIDEOS_SETTINGS)}
                    </SettingsSubsection>

-                    <SettingsSubsection heading={_t("common|timeline")}>
+                    <SettingsSubsection heading={_t("common|timeline")} formWrap>
                        {this.renderGroup(PreferencesUserSettingsTab.TIMELINE_SETTINGS)}
                    </SettingsSubsection>

@@ -356,11 +363,11 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
                        <InviteRulesAccountSetting />
                    </SettingsSubsection>

-                    <SettingsSubsection heading={_t("settings|preferences|room_directory_heading")}>
+                    <SettingsSubsection heading={_t("settings|preferences|room_directory_heading")} formWrap>
                        {this.renderGroup(PreferencesUserSettingsTab.ROOM_DIRECTORY_SETTINGS)}
                    </SettingsSubsection>

-                    <SettingsSubsection heading={_t("common|general")} stretchContent>
+                    <SettingsSubsection heading={_t("common|general")} stretchContent formWrap>
                        {this.renderGroup(PreferencesUserSettingsTab.GENERAL_SETTINGS)}

                        <SettingsFlag name="Electron.showTrayIcon" level={SettingLevel.PLATFORM} hideIfCannotSet />
@@ -12,6 +12,7 @@ import { type Room, RoomEvent, type IServerVersions } from "matrix-js-sdk/src/ma
 import { KnownMembership, type Membership } from "matrix-js-sdk/src/types";
 import { logger } from "matrix-js-sdk/src/logger";
 import { WarningIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { Form } from "@vector-im/compound-web";

 import { _t } from "../../../../../languageHandler";
 import { MatrixClientPeg } from "../../../../../MatrixClientPeg";
@@ -321,7 +322,13 @@ export default class SecurityUserSettingsTab extends React.Component<IProps, ISt
                });
            };
            posthogSection = (
-                <>
+                <Form.Root
+                    onSubmit={(evt) => {
+                        evt.preventDefault();
+                        evt.stopPropagation();
+                    }}
+                    className="mx_SecurityUserSettingsTab_posthogSection"
+                >
                    <SettingsSubsection
                        heading={_t("common|analytics")}
                        description={_t("settings|security|analytics_description")}
@@ -336,7 +343,7 @@ export default class SecurityUserSettingsTab extends React.Component<IProps, ISt
                    <SettingsSubsection heading={_t("settings|sessions|title")}>
                        <SettingsFlag name="deviceClientInformationOptIn" level={SettingLevel.ACCOUNT} />
                    </SettingsSubsection>
-                </>
+                </Form.Root>
            );
        }

@@ -7,10 +7,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */

-import React, { type JSX, type ReactNode } from "react";
+import React, { type ChangeEventHandler, type JSX, type ReactNode } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 import { FALLBACK_ICE_SERVER } from "matrix-js-sdk/src/webrtc/call";
 import { type EmptyObject } from "matrix-js-sdk/src/matrix";
+import { Form, SettingsToggleInput } from "@vector-im/compound-web";

 import { _t } from "../../../../../languageHandler";
 import MediaDeviceHandler, { type IMediaDevices, MediaDeviceKindEnum } from "../../../../../MediaDeviceHandler";
@@ -18,7 +19,6 @@ import Field from "../../../elements/Field";
 import AccessibleButton from "../../../elements/AccessibleButton";
 import { SettingLevel } from "../../../../../settings/SettingLevel";
 import SettingsFlag from "../../../elements/SettingsFlag";
-import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch";
 import { requestMediaPermissions } from "../../../../../utils/media/requestMediaPermissions";
 import SettingsTab from "../SettingsTab";
 import { SettingsSection } from "../../shared/SettingsSection";
@@ -140,6 +140,24 @@ export default class VoiceUserSettingsTab extends React.Component<EmptyObject, I
        );
    }

+    private onAutoGainChanged: ChangeEventHandler<HTMLInputElement> = async (event) => {
+        const enable = event.target.checked;
+        await MediaDeviceHandler.setAudioAutoGainControl(enable);
+        this.setState({ audioAutoGainControl: MediaDeviceHandler.getAudioAutoGainControl() });
+    };
+
+    private onNoiseSuppressionChanged: ChangeEventHandler<HTMLInputElement> = async (event) => {
+        const enable = event.target.checked;
+        await MediaDeviceHandler.setAudioNoiseSuppression(enable);
+        this.setState({ audioNoiseSuppression: MediaDeviceHandler.getAudioNoiseSuppression() });
+    };
+
+    private onEchoCancellationChanged: ChangeEventHandler<HTMLInputElement> = async (event) => {
+        const enable = event.target.checked;
+        await MediaDeviceHandler.setAudioEchoCancellation(enable);
+        this.setState({ audioEchoCancellation: MediaDeviceHandler.getAudioEchoCancellation() });
+    };
+
    public render(): ReactNode {
        let requestButton: ReactNode | undefined;
        let speakerDropdown: ReactNode | undefined;
@@ -169,64 +187,62 @@ export default class VoiceUserSettingsTab extends React.Component<EmptyObject, I

        return (
            <SettingsTab>
-                <SettingsSection>
-                    {requestButton}
-                    <SettingsSubsection heading={_t("settings|voip|voice_section")} stretchContent>
-                        {speakerDropdown}
-                        {microphoneDropdown}
-                        <LabelledToggleSwitch
-                            value={this.state.audioAutoGainControl}
-                            onChange={async (v): Promise<void> => {
-                                await MediaDeviceHandler.setAudioAutoGainControl(v);
-                                this.setState({ audioAutoGainControl: MediaDeviceHandler.getAudioAutoGainControl() });
-                            }}
-                            label={_t("settings|voip|voice_agc")}
-                            data-testid="voice-auto-gain"
-                        />
-                    </SettingsSubsection>
-                    <SettingsSubsection heading={_t("settings|voip|video_section")} stretchContent>
-                        {webcamDropdown}
-                        <SettingsFlag name="VideoView.flipVideoHorizontally" level={SettingLevel.ACCOUNT} />
-                    </SettingsSubsection>
-                </SettingsSection>
+                <Form.Root
+                    onSubmit={(evt) => {
+                        evt.preventDefault();
+                        evt.stopPropagation();
+                    }}
+                >
+                    <SettingsSection>
+                        {requestButton}
+                        <SettingsSubsection heading={_t("settings|voip|voice_section")} stretchContent>
+                            {speakerDropdown}
+                            {microphoneDropdown}
+                            <SettingsToggleInput
+                                name="voice-auto-gain"
+                                label={_t("settings|voip|voice_agc")}
+                                checked={this.state.audioAutoGainControl}
+                                onChange={this.onAutoGainChanged}
+                            />
+                        </SettingsSubsection>
+                        <SettingsSubsection heading={_t("settings|voip|video_section")} stretchContent>
+                            {webcamDropdown}
+                            <SettingsFlag name="VideoView.flipVideoHorizontally" level={SettingLevel.ACCOUNT} />
+                        </SettingsSubsection>
+                    </SettingsSection>

-                <SettingsSection heading={_t("common|advanced")}>
-                    <SettingsSubsection heading={_t("settings|voip|voice_processing")}>
-                        <LabelledToggleSwitch
-                            value={this.state.audioNoiseSuppression}
-                            onChange={async (v): Promise<void> => {
-                                await MediaDeviceHandler.setAudioNoiseSuppression(v);
-                                this.setState({ audioNoiseSuppression: MediaDeviceHandler.getAudioNoiseSuppression() });
-                            }}
-                            label={_t("settings|voip|noise_suppression")}
-                            data-testid="voice-noise-suppression"
-                        />
-                        <LabelledToggleSwitch
-                            value={this.state.audioEchoCancellation}
-                            onChange={async (v): Promise<void> => {
-                                await MediaDeviceHandler.setAudioEchoCancellation(v);
-                                this.setState({ audioEchoCancellation: MediaDeviceHandler.getAudioEchoCancellation() });
-                            }}
-                            label={_t("settings|voip|echo_cancellation")}
-                            data-testid="voice-echo-cancellation"
-                        />
-                    </SettingsSubsection>
-                    <SettingsSubsection heading={_t("settings|voip|connection_section")}>
-                        <SettingsFlag
-                            name="webRtcAllowPeerToPeer"
-                            level={SettingLevel.DEVICE}
-                            onChange={this.changeWebRtcMethod}
-                        />
-                        <SettingsFlag
-                            name="fallbackICEServerAllowed"
-                            label={_t("settings|voip|enable_fallback_ice_server", {
-                                server: new URL(FALLBACK_ICE_SERVER).pathname,
-                            })}
-                            level={SettingLevel.DEVICE}
-                            hideIfCannotSet
-                        />
-                    </SettingsSubsection>
-                </SettingsSection>
+                    <SettingsSection heading={_t("common|advanced")}>
+                        <SettingsSubsection heading={_t("settings|voip|voice_processing")}>
+                            <SettingsToggleInput
+                                name="voice-noise-suppression"
+                                label={_t("settings|voip|noise_suppression")}
+                                checked={this.state.audioNoiseSuppression}
+                                onChange={this.onNoiseSuppressionChanged}
+                            />
+                            <SettingsToggleInput
+                                name="voice-echo-cancellation"
+                                label={_t("settings|voip|echo_cancellation")}
+                                checked={this.state.audioEchoCancellation}
+                                onChange={this.onEchoCancellationChanged}
+                            />
+                        </SettingsSubsection>
+                        <SettingsSubsection heading={_t("settings|voip|connection_section")}>
+                            <SettingsFlag
+                                name="webRtcAllowPeerToPeer"
+                                level={SettingLevel.DEVICE}
+                                onChange={this.changeWebRtcMethod}
+                            />
+                            <SettingsFlag
+                                name="fallbackICEServerAllowed"
+                                label={_t("settings|voip|enable_fallback_ice_server", {
+                                    server: new URL(FALLBACK_ICE_SERVER).pathname,
+                                })}
+                                level={SettingLevel.DEVICE}
+                                hideIfCannotSet
+                            />
+                        </SettingsSubsection>
+                    </SettingsSection>
+                </Form.Root>
            </SettingsTab>
        );
    }
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */

-import React, { type JSX, useState } from "react";
+import React, { type ChangeEventHandler, type JSX, useCallback, useState } from "react";
 import {
    type Room,
    EventType,
@@ -15,12 +15,12 @@ import {
    JoinRule,
    type MatrixClient,
 } from "matrix-js-sdk/src/matrix";
+import { Form, SettingsToggleInput } from "@vector-im/compound-web";

 import { _t } from "../../../languageHandler";
 import AccessibleButton from "../elements/AccessibleButton";
 import AliasSettings from "../room_settings/AliasSettings";
 import { useStateToggle } from "../../../hooks/useStateToggle";
-import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
 import { useLocalEcho } from "../../../hooks/useLocalEcho";
 import JoinRuleSettings from "../settings/JoinRuleSettings";
 import { useRoomState } from "../../../hooks/useRoomState";
@@ -50,6 +50,7 @@ const SpaceSettingsVisibilityTab: React.FC<IProps> = ({ matrixClient: cli, space
    const userId = cli.getUserId()!;

    const joinRule = useRoomState(space, (state) => state.getJoinRule());
+
    const [guestAccessEnabled, setGuestAccessEnabled] = useLocalEcho<boolean>(
        () =>
            space.currentState.getStateEvents(EventType.RoomGuestAccess, "")?.getContent()?.guest_access ===
@@ -65,6 +66,10 @@ const SpaceSettingsVisibilityTab: React.FC<IProps> = ({ matrixClient: cli, space
            ),
        () => setError(_t("room_settings|visibility|error_update_guest_access")),
    );
+    const onGuestAccessEnabledChanged = useCallback<ChangeEventHandler<HTMLInputElement>>(
+        (e) => setGuestAccessEnabled(e.target.checked),
+        [setGuestAccessEnabled],
+    );
    const [historyVisibility, setHistoryVisibility] = useLocalEcho<HistoryVisibility>(
        () =>
            space.currentState.getStateEvents(EventType.RoomHistoryVisibility, "")?.getContent()?.history_visibility ||
@@ -103,19 +108,15 @@ const SpaceSettingsVisibilityTab: React.FC<IProps> = ({ matrixClient: cli, space
                </AccessibleButton>

                {showAdvancedSection && (
-                    <div className="mx_SettingsTab_toggleWithDescription">
-                        <LabelledToggleSwitch
-                            value={guestAccessEnabled}
-                            onChange={setGuestAccessEnabled}
-                            disabled={!canSetGuestAccess}
-                            label={_t("room_settings|visibility|guest_access_label")}
-                        />
-                        <p>
-                            {_t("room_settings|visibility|guest_access_explainer")}
-                            <br />
-                            {_t("room_settings|visibility|guest_access_explainer_public_space")}
-                        </p>
-                    </div>
+                    <SettingsToggleInput
+                        name="guest-access-enabled"
+                        checked={guestAccessEnabled}
+                        onChange={onGuestAccessEnabledChanged}
+                        disabled={!canSetGuestAccess}
+                        disabledMessage={_t("room_settings|visibility|guest_access_disabled")}
+                        helpMessage={_t("room_settings|visibility|guest_access_explainer")}
+                        label={_t("room_settings|visibility|guest_access_label")}
+                    />
                )}
            </div>
        );
@@ -155,26 +156,32 @@ const SpaceSettingsVisibilityTab: React.FC<IProps> = ({ matrixClient: cli, space
                        onError={(): void => setError(_t("room_settings|visibility|error_failed_save"))}
                        closeSettingsFn={closeSettingsFn}
                    />
-                    {advancedSection}
-                    <div className="mx_SettingsTab_toggleWithDescription">
-                        <LabelledToggleSwitch
-                            value={historyVisibility === HistoryVisibility.WorldReadable}
-                            onChange={(checked: boolean): void => {
+                    <Form.Root
+                        onSubmit={(evt) => {
+                            evt.preventDefault();
+                            evt.stopPropagation();
+                        }}
+                    >
+                        {advancedSection}
+                        <SettingsToggleInput
+                            name="space-history-visibility"
+                            checked={historyVisibility === HistoryVisibility.WorldReadable}
+                            onChange={(evt): void => {
                                setHistoryVisibility(
-                                    checked ? HistoryVisibility.WorldReadable : HistoryVisibility.Shared,
+                                    evt.target.checked ? HistoryVisibility.WorldReadable : HistoryVisibility.Shared,
                                );
                            }}
+                            helpMessage={_t("room_settings|visibility|history_visibility_anyone_space_description")}
                            disabled={!canSetHistoryVisibility}
+                            disabledMessage={_t("room_settings|visibility|history_visibility_anyone_space_disabled")}
                            label={_t("room_settings|visibility|history_visibility_anyone_space")}
                        />
                        <p>
-                            {_t("room_settings|visibility|history_visibility_anyone_space_description")}
-                            <br />
                            <strong>
                                {_t("room_settings|visibility|history_visibility_anyone_space_recommendation")}
                            </strong>
                        </p>
-                    </div>
+                    </Form.Root>
                </SettingsFieldset>

                {addressesSection}