diff --git a/web/src/ui/util/Toggle.css b/web/src/ui/util/Toggle.css
new file mode 100644
index 0000000..abbb28b
--- /dev/null
+++ b/web/src/ui/util/Toggle.css
@@ -0,0 +1,36 @@
+input.toggle {
+ --transition-duration: .3s;
+ --disabled-color: var(--secondary-text-color);
+ --enabled-color: var(--primary-color-dark);
+
+ cursor: var(--clickable-cursor);
+ appearance: none;
+ display: block;
+ background-color: var(--background-color);
+ border: 1px solid var(--disabled-color);
+ border-radius: 1.5em;
+ width: 3.5em;
+ height: 2em;
+ padding: calc(.25em - 1px);
+ transition: background-color var(--transition-duration), border-color var(--transition-duration);
+
+ &::after {
+ content: "";
+ display: block;
+ height: 1.5em;
+ width: 1.5em;
+ border-radius: 50%;
+ background-color: var(--disabled-color);
+ transition: margin-left var(--transition-duration), background-color var(--transition-duration);
+ }
+
+ &:checked {
+ border-color: var(--enabled-color);
+ background-color: var(--enabled-color);
+
+ &::after {
+ margin-left: 1.5em;
+ background-color: var(--background-color);
+ }
+ }
+}
diff --git a/web/src/ui/util/Toggle.tsx b/web/src/ui/util/Toggle.tsx
new file mode 100644
index 0000000..770e3b6
--- /dev/null
+++ b/web/src/ui/util/Toggle.tsx
@@ -0,0 +1,37 @@
+// gomuks - A Matrix client written in Go.
+// Copyright (C) 2024 Tulir Asokan
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see .
+import { InputHTMLAttributes } from "react"
+import "./Toggle.css"
+
+export interface ToggleProps extends Omit, "type"> {
+ disabledColor?: string
+ enabledColor?: string
+}
+
+const Toggle = (props: ToggleProps) => {
+ const extraStyle = {
+ "--disabled-color": props.disabledColor,
+ "--enabled-color": props.enabledColor,
+ }
+ return
+}
+
+export default Toggle