diff --git a/.gitignore b/.gitignore
index aa5a7bc86..9b8b985ed 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
 CLAUDE.local.md
+specs/
diff --git a/docs/app/components/shared/components_list.rb b/docs/app/components/shared/components_list.rb
index 9f2775c1b..c46e8f9f8 100644
--- a/docs/app/components/shared/components_list.rb
+++ b/docs/app/components/shared/components_list.rb
@@ -50,6 +50,8 @@ def components
           {name: "Tabs", path: docs_tabs_path},
           {name: "Textarea", path: docs_textarea_path},
           {name: "Theme Toggle", path: docs_theme_toggle_path},
+          {name: "Toggle", path: docs_toggle_path},
+          {name: "Toggle Group", path: docs_toggle_group_path},
           {name: "Tooltip", path: docs_tooltip_path},
           {name: "Typography", path: docs_typography_path}
         ]
diff --git a/docs/app/components/shared/navbar.rb b/docs/app/components/shared/navbar.rb
index c8d45178e..513d0d6f7 100644
--- a/docs/app/components/shared/navbar.rb
+++ b/docs/app/components/shared/navbar.rb
@@ -34,37 +34,29 @@ def view_template
 
       def dark_mode_toggle
         ThemeToggle do
-          SetLightMode do
-            Button(variant: :ghost, icon: true) do
-              svg(
-                xmlns: "http://www.w3.org/2000/svg",
-                viewbox: "0 0 24 24",
-                fill: "currentColor",
-                class: "w-5 h-5"
-              ) do |s|
-                s.path(
-                  d:
-                    "M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z"
-                )
-              end
-            end
+          # Sun (visible in light mode)
+          svg(
+            xmlns: "http://www.w3.org/2000/svg",
+            viewbox: "0 0 24 24",
+            fill: "currentColor",
+            class: "w-5 h-5 dark:hidden"
+          ) do |s|
+            s.path(
+              d: "M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z"
+            )
           end
-          SetDarkMode do
-            Button(variant: :ghost, icon: true) do
-              svg(
-                xmlns: "http://www.w3.org/2000/svg",
-                viewbox: "0 0 24 24",
-                fill: "currentColor",
-                class: "w-4 h-4"
-              ) do |s|
-                s.path(
-                  fill_rule: "evenodd",
-                  d:
-                    "M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z",
-                  clip_rule: "evenodd"
-                )
-              end
-            end
+          # Moon (visible in dark mode)
+          svg(
+            xmlns: "http://www.w3.org/2000/svg",
+            viewbox: "0 0 24 24",
+            fill: "currentColor",
+            class: "w-5 h-5 hidden dark:inline-block"
+          ) do |s|
+            s.path(
+              fill_rule: "evenodd",
+              d: "M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z",
+              clip_rule: "evenodd"
+            )
           end
         end
       end
diff --git a/docs/app/controllers/docs_controller.rb b/docs/app/controllers/docs_controller.rb
index f60ca1237..20b70c066 100644
--- a/docs/app/controllers/docs_controller.rb
+++ b/docs/app/controllers/docs_controller.rb
@@ -222,6 +222,14 @@ def theme_toggle
     render Views::Docs::ThemeToggle.new
   end
 
+  def toggle
+    render Views::Docs::Toggle.new
+  end
+
+  def toggle_group
+    render Views::Docs::ToggleGroup.new
+  end
+
   def tooltip
     render Views::Docs::Tooltip.new
   end
diff --git a/docs/app/javascript/controllers/index.js b/docs/app/javascript/controllers/index.js
index e68815bd9..3fe2204d6 100644
--- a/docs/app/javascript/controllers/index.js
+++ b/docs/app/javascript/controllers/index.js
@@ -43,12 +43,12 @@ application.register("ruby-ui--command", RubyUi__CommandController)
 import RubyUi__ContextMenuController from "./ruby_ui/context_menu_controller"
 application.register("ruby-ui--context-menu", RubyUi__ContextMenuController)
 
-import RubyUi__DataTableController from "./ruby_ui/data_table_controller"
-application.register("ruby-ui--data-table", RubyUi__DataTableController)
-
 import RubyUi__DataTableColumnVisibilityController from "./ruby_ui/data_table_column_visibility_controller"
 application.register("ruby-ui--data-table-column-visibility", RubyUi__DataTableColumnVisibilityController)
 
+import RubyUi__DataTableController from "./ruby_ui/data_table_controller"
+application.register("ruby-ui--data-table", RubyUi__DataTableController)
+
 import RubyUi__DataTableSearchController from "./ruby_ui/data_table_search_controller"
 application.register("ruby-ui--data-table-search", RubyUi__DataTableSearchController)
 
@@ -91,6 +91,12 @@ application.register("ruby-ui--tabs", RubyUi__TabsController)
 import RubyUi__ThemeToggleController from "./ruby_ui/theme_toggle_controller"
 application.register("ruby-ui--theme-toggle", RubyUi__ThemeToggleController)
 
+import RubyUi__ToggleController from "./ruby_ui/toggle_controller"
+application.register("ruby-ui--toggle", RubyUi__ToggleController)
+
+import RubyUi__ToggleGroupController from "./ruby_ui/toggle_group_controller"
+application.register("ruby-ui--toggle-group", RubyUi__ToggleGroupController)
+
 import RubyUi__TooltipController from "./ruby_ui/tooltip_controller"
 application.register("ruby-ui--tooltip", RubyUi__TooltipController)
 
diff --git a/docs/app/javascript/controllers/ruby_ui/theme_toggle_controller.js b/docs/app/javascript/controllers/ruby_ui/theme_toggle_controller.js
index 01b3b24b7..b1eb97f78 100644
--- a/docs/app/javascript/controllers/ruby_ui/theme_toggle_controller.js
+++ b/docs/app/javascript/controllers/ruby_ui/theme_toggle_controller.js
@@ -1,30 +1,38 @@
 import { Controller } from "@hotwired/stimulus"
 
+// Connects to data-controller="ruby-ui--theme-toggle"
+// Sits on the same wrapper as ruby-ui--toggle. Listens for the toggle's
+// ruby-ui--toggle:change event. pressed = dark mode.
 export default class extends Controller {
-  initialize() {
-    this.setTheme()
+  connect() {
+    this.applyTheme(this.currentTheme())
   }
 
-  setTheme() {
-    // On page load or when changing themes, best to add inline in `head` to avoid FOUC
-    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-      document.documentElement.classList.add('dark')
-      document.documentElement.classList.remove('light')
-    } else {
-      document.documentElement.classList.remove('dark')
-      document.documentElement.classList.add('light')
-    }
+  apply(event) {
+    const pressed = event.detail?.pressed
+    const theme = pressed ? "dark" : "light"
+    localStorage.theme = theme
+    this.applyTheme(theme)
   }
 
-  setLightTheme() {
-    // Whenever the user explicitly chooses light mode
-    localStorage.theme = 'light'
-    this.setTheme()
+  currentTheme() {
+    if (localStorage.theme === "dark") return "dark"
+    if (localStorage.theme === "light") return "light"
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
   }
 
-  setDarkTheme() {
-    // Whenever the user explicitly chooses dark mode
-    localStorage.theme = 'dark'
-    this.setTheme()
+  applyTheme(theme) {
+    const html = document.documentElement
+    if (theme === "dark") {
+      html.classList.add("dark")
+      html.classList.remove("light")
+    } else {
+      html.classList.add("light")
+      html.classList.remove("dark")
+    }
+    // Flip the sibling Toggle controller's pressed value; it will propagate
+    // aria-pressed / data-state to the button target.
+    const dark = theme === "dark"
+    this.element.setAttribute("data-ruby-ui--toggle-pressed-value", dark ? "true" : "false")
   }
 }
diff --git a/docs/app/javascript/controllers/ruby_ui/toggle_controller.js b/docs/app/javascript/controllers/ruby_ui/toggle_controller.js
new file mode 100644
index 000000000..259488760
--- /dev/null
+++ b/docs/app/javascript/controllers/ruby_ui/toggle_controller.js
@@ -0,0 +1,33 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="ruby-ui--toggle"
+// Sits on a wrapper element; the visible <button> and optional hidden <input>
+// are descendants so Stimulus can target them.
+export default class extends Controller {
+  static targets = ["button", "input"]
+  static values = {
+    pressed: Boolean,
+    value: String,
+    unpressedValue: String
+  }
+
+  toggle(event) {
+    if (this.buttonTarget.disabled) return
+    this.pressedValue = !this.pressedValue
+  }
+
+  pressedValueChanged(current, previous) {
+    if (this.hasButtonTarget) {
+      this.buttonTarget.setAttribute("aria-pressed", current ? "true" : "false")
+      this.buttonTarget.dataset.state = current ? "on" : "off"
+    }
+
+    if (this.hasInputTarget) {
+      this.inputTarget.value = current ? this.valueValue : this.unpressedValueValue
+    }
+
+    if (previous !== undefined) {
+      this.dispatch("change", { detail: { pressed: current }, bubbles: true })
+    }
+  }
+}
diff --git a/docs/app/javascript/controllers/ruby_ui/toggle_group_controller.js b/docs/app/javascript/controllers/ruby_ui/toggle_group_controller.js
new file mode 100644
index 000000000..00121ec0b
--- /dev/null
+++ b/docs/app/javascript/controllers/ruby_ui/toggle_group_controller.js
@@ -0,0 +1,126 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="ruby-ui--toggle-group"
+export default class extends Controller {
+  static targets = ["item", "input"]
+  static values = { type: String, name: String }
+
+  connect() {
+    this.reconcile()
+  }
+
+  select(event) {
+    const item = event.currentTarget
+    if (item.disabled) return
+
+    if (this.typeValue === "single") {
+      this.itemTargets.forEach(el => this.setPressed(el, el === item))
+    } else {
+      this.setPressed(item, !this.isPressed(item))
+    }
+
+    this.rebuildInputs()
+    this.updateRovingTabindex(item)
+  }
+
+  navigate(event) {
+    if (this.typeValue !== "single") return
+    const items = this.enabledItems()
+    if (items.length === 0) return
+
+    const isRtl = document.documentElement.dir === "rtl"
+    const currentIndex = items.indexOf(event.currentTarget)
+    let nextIndex = currentIndex
+
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+        nextIndex = (currentIndex + (isRtl && event.key === "ArrowRight" ? -1 : 1) + items.length) % items.length
+        break
+      case "ArrowLeft":
+      case "ArrowUp":
+        nextIndex = (currentIndex + (isRtl && event.key === "ArrowLeft" ? 1 : -1) + items.length) % items.length
+        break
+      case "Home":
+        nextIndex = 0
+        break
+      case "End":
+        nextIndex = items.length - 1
+        break
+      case " ":
+      case "Enter":
+        event.preventDefault()
+        event.currentTarget.click()
+        return
+      default:
+        return
+    }
+
+    event.preventDefault()
+    const next = items[nextIndex]
+    this.updateRovingTabindex(next)
+    next.focus()
+  }
+
+  reconcile() {
+    if (this.typeValue === "single") {
+      const pressed = this.itemTargets.find(el => this.isPressed(el))
+      const first = pressed || this.enabledItems()[0]
+      this.itemTargets.forEach(el => {
+        el.setAttribute("tabindex", el === first ? "0" : "-1")
+      })
+    } else {
+      this.itemTargets.forEach(el => el.setAttribute("tabindex", "0"))
+    }
+    this.rebuildInputs()
+  }
+
+  isPressed(item) {
+    return item.dataset.state === "on"
+  }
+
+  setPressed(item, pressed) {
+    item.dataset.state = pressed ? "on" : "off"
+    if (this.typeValue === "single") {
+      item.setAttribute("aria-checked", pressed ? "true" : "false")
+    } else {
+      item.setAttribute("aria-pressed", pressed ? "true" : "false")
+    }
+  }
+
+  updateRovingTabindex(focusedItem) {
+    if (this.typeValue !== "single") return
+    this.itemTargets.forEach(el => {
+      el.setAttribute("tabindex", el === focusedItem ? "0" : "-1")
+    })
+  }
+
+  enabledItems() {
+    return this.itemTargets.filter(el => !el.disabled)
+  }
+
+  rebuildInputs() {
+    if (!this.nameValue) return
+    this.inputTargets.forEach(el => el.remove())
+
+    const pressed = this.itemTargets.filter(el => this.isPressed(el))
+
+    if (this.typeValue === "single") {
+      const val = pressed[0]?.dataset.value || ""
+      this.element.appendChild(this.buildInput(this.nameValue, val))
+    } else {
+      pressed.forEach(item => {
+        this.element.appendChild(this.buildInput(`${this.nameValue}[]`, item.dataset.value))
+      })
+    }
+  }
+
+  buildInput(name, value) {
+    const input = document.createElement("input")
+    input.type = "hidden"
+    input.name = name
+    input.value = value
+    input.setAttribute("data-ruby-ui--toggle-group-target", "input")
+    return input
+  }
+}
diff --git a/docs/app/lib/site_files.rb b/docs/app/lib/site_files.rb
index 2a6827e79..70977d327 100644
--- a/docs/app/lib/site_files.rb
+++ b/docs/app/lib/site_files.rb
@@ -116,6 +116,8 @@ class SiteFiles
     {title: "Tabs", path: "/docs/tabs", description: "Layered tab panels displayed one at a time."},
     {title: "Textarea", path: "/docs/textarea", description: "Styled multiline text input."},
     {title: "Theme Toggle", path: "/docs/theme_toggle", description: "Toggle control for switching between light and dark themes."},
+    {title: "Toggle", path: "/docs/toggle", description: "Two-state button that can be either on or off."},
+    {title: "Toggle Group", path: "/docs/toggle_group", description: "Group of two-state toggle buttons."},
     {title: "Tooltip", path: "/docs/tooltip", description: "Popup information shown on keyboard focus or hover."},
     {title: "Typography", path: "/docs/typography", description: "Text primitives and sensible typography defaults."}
   ].freeze
diff --git a/docs/app/views/docs/getting_started/dark_mode.rb b/docs/app/views/docs/getting_started/dark_mode.rb
index 43eb84f3d..2abb6e1b9 100644
--- a/docs/app/views/docs/getting_started/dark_mode.rb
+++ b/docs/app/views/docs/getting_started/dark_mode.rb
@@ -48,39 +48,30 @@ def view_template
         div(class: "pt-4") do
           render Docs::VisualCodeExample.new(title: "Toggle component", context: self) do
             <<~RUBY
-              ThemeToggle do |toggle|
-                SetLightMode do
-                  Button(variant: :outline, icon: true) do
-                    svg(
-                      xmlns: "http://www.w3.org/2000/svg",
-                      viewbox: "0 0 24 24",
-                      fill: "currentColor",
-                      class: "w-4 h-4"
-                    ) do |s|
-                      s.path(
-                        d:
-                          "M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z"
-                      )
-                    end
-                  end
+              ThemeToggle do
+                svg(
+                  xmlns: "http://www.w3.org/2000/svg",
+                  viewbox: "0 0 24 24",
+                  fill: "currentColor",
+                  class: "w-4 h-4 dark:hidden"
+                ) do |s|
+                  s.path(
+                    d:
+                      "M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z"
+                  )
                 end
-
-                SetDarkMode do
-                  Button(variant: :outline, icon: true) do
-                    svg(
-                      xmlns: "http://www.w3.org/2000/svg",
-                      viewbox: "0 0 24 24",
-                      fill: "currentColor",
-                      class: "w-4 h-4"
-                    ) do |s|
-                      s.path(
-                        fill_rule: "evenodd",
-                        d:
-                          "M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z",
-                        clip_rule: "evenodd"
-                      )
-                    end
-                  end
+                svg(
+                  xmlns: "http://www.w3.org/2000/svg",
+                  viewbox: "0 0 24 24",
+                  fill: "currentColor",
+                  class: "w-4 h-4 hidden dark:inline-block"
+                ) do |s|
+                  s.path(
+                    fill_rule: "evenodd",
+                    d:
+                      "M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z",
+                    clip_rule: "evenodd"
+                  )
                 end
               end
             RUBY
diff --git a/docs/app/views/docs/theme_toggle.rb b/docs/app/views/docs/theme_toggle.rb
index 1740a924b..6573f8dfa 100644
--- a/docs/app/views/docs/theme_toggle.rb
+++ b/docs/app/views/docs/theme_toggle.rb
@@ -5,66 +5,39 @@ def view_template
     component = "ThemeToggle"
 
     div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
-      render Docs::Header.new(title: "Theme Toggle", description: "Toggle between dark/light theme.")
+      render Docs::Header.new(title: "Theme Toggle", description: "Toggle between dark and light theme. Composes the Toggle component; pressed = dark mode.")
 
       Heading(level: 2) { "Usage" }
 
       render Docs::VisualCodeExample.new(title: "With icon", context: self) do
         <<~RUBY
-          ThemeToggle do |toggle|
-            SetLightMode do
-              Button(variant: :ghost, icon: true) do
-                svg(
-                  xmlns: "http://www.w3.org/2000/svg",
-                  viewbox: "0 0 24 24",
-                  fill: "currentColor",
-                  class: "w-4 h-4"
-                ) do |s|
-                  s.path(
-                    d:
-                      "M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z"
-                  )
-                end
-              end
+          ThemeToggle do
+            svg(
+              xmlns: "http://www.w3.org/2000/svg",
+              viewbox: "0 0 24 24",
+              fill: "currentColor",
+              class: "w-4 h-4 dark:hidden"
+            ) do |s|
+              s.path(
+                d: "M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z"
+              )
             end
-
-            SetDarkMode do
-              Button(variant: :ghost, icon: true) do
-                svg(
-                  xmlns: "http://www.w3.org/2000/svg",
-                  viewbox: "0 0 24 24",
-                  fill: "currentColor",
-                  class: "w-4 h-4"
-                ) do |s|
-                  s.path(
-                    fill_rule: "evenodd",
-                    d:
-                      "M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z",
-                    clip_rule: "evenodd"
-                  )
-                end
-              end
-            end
-          end
-        RUBY
-      end
-
-      render Docs::VisualCodeExample.new(title: "With text", context: self) do
-        <<~RUBY
-          ThemeToggle do |toggle|
-            SetLightMode do
-              Button(variant: :primary) { "Light" }
-            end
-
-            SetDarkMode do
-              Button(variant: :primary) { "Dark" }
+            svg(
+              xmlns: "http://www.w3.org/2000/svg",
+              viewbox: "0 0 24 24",
+              fill: "currentColor",
+              class: "w-4 h-4 hidden dark:inline-block"
+            ) do |s|
+              s.path(
+                fill_rule: "evenodd",
+                d: "M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z",
+                clip_rule: "evenodd"
+              )
             end
           end
         RUBY
       end
 
-      render Components::ComponentSetup::Tabs.new(component_name: component)
-
       render Docs::ComponentsTable.new(component_files(component))
     end
   end
diff --git a/docs/app/views/docs/toggle.rb b/docs/app/views/docs/toggle.rb
new file mode 100644
index 000000000..6865aff6e
--- /dev/null
+++ b/docs/app/views/docs/toggle.rb
@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+
+class Views::Docs::Toggle < Views::Base
+  def view_template
+    component = "Toggle"
+
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(
+        title: "Toggle",
+        description: "A two-state button that can be either on or off."
+      )
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Default", context: self) do
+        <<~RUBY
+          Toggle { "Bold" }
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Outline", context: self) do
+        <<~RUBY
+          Toggle(variant: :outline) { "Italic" }
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Sizes", context: self) do
+        <<~RUBY
+          div(class: "flex items-center gap-2") do
+            Toggle(size: :sm) { "Small" }
+            Toggle(size: :default) { "Default" }
+            Toggle(size: :lg) { "Large" }
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Pressed", context: self) do
+        <<~RUBY
+          Toggle(pressed: true) { "Pressed" }
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Disabled", context: self) do
+        <<~RUBY
+          Toggle(disabled: true) { "Disabled" }
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "In a form", context: self) do
+        <<~RUBY
+          Toggle(name: "bold", value: "1") { "Bold" }
+        RUBY
+      end
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+end
diff --git a/docs/app/views/docs/toggle_group.rb b/docs/app/views/docs/toggle_group.rb
new file mode 100644
index 000000000..77f15edfa
--- /dev/null
+++ b/docs/app/views/docs/toggle_group.rb
@@ -0,0 +1,133 @@
+# frozen_string_literal: true
+
+class Views::Docs::ToggleGroup < Views::Base
+  def view_template
+    component = "ToggleGroup"
+
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(
+        title: "Toggle Group",
+        description: "A set of two-state buttons that can be toggled on or off, with single or multiple selection. Mirrors shadcn/ui ToggleGroup."
+      )
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Default", context: self) do
+        <<~RUBY
+          ToggleGroup(type: :single, name: "letter", value: "a") do |g|
+            g.ToggleGroupItem(value: "a") { "A" }
+            g.ToggleGroupItem(value: "b") { "B" }
+            g.ToggleGroupItem(value: "c") { "C" }
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Outline", context: self) do
+        <<~RUBY
+          ToggleGroup(type: :multiple, name: "fmt", variant: :outline, value: %w[bold]) do |g|
+            g.ToggleGroupItem(value: "bold") { "B" }
+            g.ToggleGroupItem(value: "italic") { "I" }
+            g.ToggleGroupItem(value: "underline") { "U" }
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Multiple", context: self) do
+        <<~RUBY
+          ToggleGroup(type: :multiple, name: "fmt_m", variant: :outline, value: %w[bold italic]) do |g|
+            g.ToggleGroupItem(value: "bold") { "B" }
+            g.ToggleGroupItem(value: "italic") { "I" }
+            g.ToggleGroupItem(value: "underline") { "U" }
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Single", context: self) do
+        <<~RUBY
+          ToggleGroup(type: :single, name: "view", value: "all", variant: :outline) do |g|
+            g.ToggleGroupItem(value: "all") { "All" }
+            g.ToggleGroupItem(value: "missed") { "Missed" }
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Size", context: self) do
+        <<~RUBY
+          div(class: "flex flex-col gap-4") do
+            ToggleGroup(type: :multiple, name: "fmt_sm", variant: :outline, size: :sm) do |g|
+              g.ToggleGroupItem(value: "bold") { "B" }
+              g.ToggleGroupItem(value: "italic") { "I" }
+              g.ToggleGroupItem(value: "underline") { "U" }
+            end
+            ToggleGroup(type: :multiple, name: "fmt_default", variant: :outline) do |g|
+              g.ToggleGroupItem(value: "bold") { "B" }
+              g.ToggleGroupItem(value: "italic") { "I" }
+              g.ToggleGroupItem(value: "underline") { "U" }
+            end
+            ToggleGroup(type: :multiple, name: "fmt_lg", variant: :outline, size: :lg) do |g|
+              g.ToggleGroupItem(value: "bold") { "B" }
+              g.ToggleGroupItem(value: "italic") { "I" }
+              g.ToggleGroupItem(value: "underline") { "U" }
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Spacing", context: self) do
+        <<~RUBY
+          ToggleGroup(type: :single, name: "align", value: "top", variant: :outline, spacing: 2) do |g|
+            g.ToggleGroupItem(value: "top") { "Top" }
+            g.ToggleGroupItem(value: "bottom") { "Bottom" }
+            g.ToggleGroupItem(value: "left") { "Left" }
+            g.ToggleGroupItem(value: "right") { "Right" }
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Vertical", context: self) do
+        <<~RUBY
+          ToggleGroup(type: :multiple, name: "fmt_v", variant: :outline, orientation: :vertical, value: %w[bold]) do |g|
+            g.ToggleGroupItem(value: "bold") { "B" }
+            g.ToggleGroupItem(value: "italic") { "I" }
+            g.ToggleGroupItem(value: "underline") { "U" }
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Disabled", context: self) do
+        <<~RUBY
+          ToggleGroup(type: :multiple, name: "fmt_d", variant: :outline, disabled: true) do |g|
+            g.ToggleGroupItem(value: "bold") { "B" }
+            g.ToggleGroupItem(value: "italic") { "I" }
+            g.ToggleGroupItem(value: "underline") { "U" }
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Custom", context: self) do
+        <<~RUBY
+          ToggleGroup(type: :single, name: "weight", value: "normal", variant: :outline, spacing: 2) do |g|
+            g.ToggleGroupItem(value: "light", size: :lg, class: "h-auto flex-col gap-1 py-2") do
+              span(class: "text-base font-light") { "Aa" }
+              span(class: "text-xs text-muted-foreground") { "Light" }
+            end
+            g.ToggleGroupItem(value: "normal", size: :lg, class: "h-auto flex-col gap-1 py-2") do
+              span(class: "text-base font-normal") { "Aa" }
+              span(class: "text-xs text-muted-foreground") { "Normal" }
+            end
+            g.ToggleGroupItem(value: "medium", size: :lg, class: "h-auto flex-col gap-1 py-2") do
+              span(class: "text-base font-medium") { "Aa" }
+              span(class: "text-xs text-muted-foreground") { "Medium" }
+            end
+            g.ToggleGroupItem(value: "bold", size: :lg, class: "h-auto flex-col gap-1 py-2") do
+              span(class: "text-base font-bold") { "Aa" }
+              span(class: "text-xs text-muted-foreground") { "Bold" }
+            end
+          end
+        RUBY
+      end
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+end
diff --git a/docs/config/routes.rb b/docs/config/routes.rb
index 71d5ed584..d1c0c8453 100644
--- a/docs/config/routes.rb
+++ b/docs/config/routes.rb
@@ -66,6 +66,8 @@
     get "tabs", to: "docs#tabs", as: :docs_tabs
     get "textarea", to: "docs#textarea", as: :docs_textarea
     get "theme_toggle", to: "docs#theme_toggle", as: :docs_theme_toggle
+    get "toggle", to: "docs#toggle", as: :docs_toggle
+    get "toggle_group", to: "docs#toggle_group", as: :docs_toggle_group
     get "tooltip", to: "docs#tooltip", as: :docs_tooltip
     get "typography", to: "docs#typography", as: :docs_typography
 
diff --git a/docs/public/llms-full.txt b/docs/public/llms-full.txt
index 49e1b54c1..26a43f280 100644
--- a/docs/public/llms-full.txt
+++ b/docs/public/llms-full.txt
@@ -298,6 +298,16 @@ This file expands the curated /llms.txt map into a compact reference that can be
 - URL: https://rubyui.com/docs/theme_toggle
 - Summary: Toggle control for switching between light and dark themes.
 
+### Toggle
+
+- URL: https://rubyui.com/docs/toggle
+- Summary: Two-state button that can be either on or off.
+
+### Toggle Group
+
+- URL: https://rubyui.com/docs/toggle_group
+- Summary: Group of two-state toggle buttons.
+
 ### Tooltip
 
 - URL: https://rubyui.com/docs/tooltip
diff --git a/docs/public/llms.txt b/docs/public/llms.txt
index 602abddf0..481be90cf 100644
--- a/docs/public/llms.txt
+++ b/docs/public/llms.txt
@@ -64,6 +64,8 @@ Use the core docs first for installation, theming, dark mode, and customization
 - [Tabs](https://rubyui.com/docs/tabs): Layered tab panels displayed one at a time.
 - [Textarea](https://rubyui.com/docs/textarea): Styled multiline text input.
 - [Theme Toggle](https://rubyui.com/docs/theme_toggle): Toggle control for switching between light and dark themes.
+- [Toggle](https://rubyui.com/docs/toggle): Two-state button that can be either on or off.
+- [Toggle Group](https://rubyui.com/docs/toggle_group): Group of two-state toggle buttons.
 - [Tooltip](https://rubyui.com/docs/tooltip): Popup information shown on keyboard focus or hover.
 - [Typography](https://rubyui.com/docs/typography): Text primitives and sensible typography defaults.
 
diff --git a/docs/public/sitemap.xml b/docs/public/sitemap.xml
index 578e42466..ee35c497b 100644
--- a/docs/public/sitemap.xml
+++ b/docs/public/sitemap.xml
@@ -275,6 +275,16 @@
     <changefreq>monthly</changefreq>
     <priority>0.7</priority>
   </url>
+  <url>
+    <loc>https://rubyui.com/docs/toggle</loc>
+    <changefreq>monthly</changefreq>
+    <priority>0.7</priority>
+  </url>
+  <url>
+    <loc>https://rubyui.com/docs/toggle_group</loc>
+    <changefreq>monthly</changefreq>
+    <priority>0.7</priority>
+  </url>
   <url>
     <loc>https://rubyui.com/docs/tooltip</loc>
     <changefreq>monthly</changefreq>
diff --git a/gem/lib/generators/ruby_ui/dependencies.yml b/gem/lib/generators/ruby_ui/dependencies.yml
index cea551a1e..092f476b8 100644
--- a/gem/lib/generators/ruby_ui/dependencies.yml
+++ b/gem/lib/generators/ruby_ui/dependencies.yml
@@ -101,3 +101,13 @@ tooltip:
 
   js_packages:
     - "@floating-ui/dom"
+
+toggle: {}
+
+toggle_group:
+  components:
+    - "Toggle"
+
+theme_toggle:
+  components:
+    - "Toggle"
diff --git a/gem/lib/ruby_ui/theme_toggle/set_dark_mode.rb b/gem/lib/ruby_ui/theme_toggle/set_dark_mode.rb
deleted file mode 100644
index 3b3076519..000000000
--- a/gem/lib/ruby_ui/theme_toggle/set_dark_mode.rb
+++ /dev/null
@@ -1,16 +0,0 @@
-# frozen_string_literal: true
-
-module RubyUI
-  class SetDarkMode < Base
-    def view_template(&)
-      div(**attrs, &)
-    end
-
-    def default_attrs
-      {
-        class: "hidden dark:inline-block",
-        data: {controller: "ruby-ui--theme-toggle", action: "click->ruby-ui--theme-toggle#setLightTheme"}
-      }
-    end
-  end
-end
diff --git a/gem/lib/ruby_ui/theme_toggle/set_light_mode.rb b/gem/lib/ruby_ui/theme_toggle/set_light_mode.rb
deleted file mode 100644
index 00f88fbfe..000000000
--- a/gem/lib/ruby_ui/theme_toggle/set_light_mode.rb
+++ /dev/null
@@ -1,16 +0,0 @@
-# frozen_string_literal: true
-
-module RubyUI
-  class SetLightMode < Base
-    def view_template(&)
-      div(**attrs, &)
-    end
-
-    def default_attrs
-      {
-        class: "dark:hidden",
-        data: {controller: "ruby-ui--theme-toggle", action: "click->ruby-ui--theme-toggle#setDarkTheme"}
-      }
-    end
-  end
-end
diff --git a/gem/lib/ruby_ui/theme_toggle/theme_toggle.rb b/gem/lib/ruby_ui/theme_toggle/theme_toggle.rb
index 000f8054b..afa8a285d 100644
--- a/gem/lib/ruby_ui/theme_toggle/theme_toggle.rb
+++ b/gem/lib/ruby_ui/theme_toggle/theme_toggle.rb
@@ -2,8 +2,20 @@
 
 module RubyUI
   class ThemeToggle < Base
-    def view_template(&)
-      div(**attrs, &)
+    def view_template(&block)
+      RubyUI.Toggle(
+        variant: :default,
+        size: :default,
+        aria: {label: "Toggle theme"},
+        wrapper: {
+          data: {
+            controller: "ruby-ui--theme-toggle",
+            action: "ruby-ui--toggle:change->ruby-ui--theme-toggle#apply"
+          }
+        },
+        **attrs,
+        &block
+      )
     end
   end
 end
diff --git a/gem/lib/ruby_ui/theme_toggle/theme_toggle_controller.js b/gem/lib/ruby_ui/theme_toggle/theme_toggle_controller.js
index 01b3b24b7..b1eb97f78 100644
--- a/gem/lib/ruby_ui/theme_toggle/theme_toggle_controller.js
+++ b/gem/lib/ruby_ui/theme_toggle/theme_toggle_controller.js
@@ -1,30 +1,38 @@
 import { Controller } from "@hotwired/stimulus"
 
+// Connects to data-controller="ruby-ui--theme-toggle"
+// Sits on the same wrapper as ruby-ui--toggle. Listens for the toggle's
+// ruby-ui--toggle:change event. pressed = dark mode.
 export default class extends Controller {
-  initialize() {
-    this.setTheme()
+  connect() {
+    this.applyTheme(this.currentTheme())
   }
 
-  setTheme() {
-    // On page load or when changing themes, best to add inline in `head` to avoid FOUC
-    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-      document.documentElement.classList.add('dark')
-      document.documentElement.classList.remove('light')
-    } else {
-      document.documentElement.classList.remove('dark')
-      document.documentElement.classList.add('light')
-    }
+  apply(event) {
+    const pressed = event.detail?.pressed
+    const theme = pressed ? "dark" : "light"
+    localStorage.theme = theme
+    this.applyTheme(theme)
   }
 
-  setLightTheme() {
-    // Whenever the user explicitly chooses light mode
-    localStorage.theme = 'light'
-    this.setTheme()
+  currentTheme() {
+    if (localStorage.theme === "dark") return "dark"
+    if (localStorage.theme === "light") return "light"
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
   }
 
-  setDarkTheme() {
-    // Whenever the user explicitly chooses dark mode
-    localStorage.theme = 'dark'
-    this.setTheme()
+  applyTheme(theme) {
+    const html = document.documentElement
+    if (theme === "dark") {
+      html.classList.add("dark")
+      html.classList.remove("light")
+    } else {
+      html.classList.add("light")
+      html.classList.remove("dark")
+    }
+    // Flip the sibling Toggle controller's pressed value; it will propagate
+    // aria-pressed / data-state to the button target.
+    const dark = theme === "dark"
+    this.element.setAttribute("data-ruby-ui--toggle-pressed-value", dark ? "true" : "false")
   }
 }
diff --git a/gem/lib/ruby_ui/theme_toggle/theme_toggle_docs.rb b/gem/lib/ruby_ui/theme_toggle/theme_toggle_docs.rb
index 1740a924b..35bd07ae0 100644
--- a/gem/lib/ruby_ui/theme_toggle/theme_toggle_docs.rb
+++ b/gem/lib/ruby_ui/theme_toggle/theme_toggle_docs.rb
@@ -11,39 +11,17 @@ def view_template
 
       render Docs::VisualCodeExample.new(title: "With icon", context: self) do
         <<~RUBY
-          ThemeToggle do |toggle|
-            SetLightMode do
-              Button(variant: :ghost, icon: true) do
-                svg(
-                  xmlns: "http://www.w3.org/2000/svg",
-                  viewbox: "0 0 24 24",
-                  fill: "currentColor",
-                  class: "w-4 h-4"
-                ) do |s|
-                  s.path(
-                    d:
-                      "M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z"
-                  )
-                end
-              end
-            end
-
-            SetDarkMode do
-              Button(variant: :ghost, icon: true) do
-                svg(
-                  xmlns: "http://www.w3.org/2000/svg",
-                  viewbox: "0 0 24 24",
-                  fill: "currentColor",
-                  class: "w-4 h-4"
-                ) do |s|
-                  s.path(
-                    fill_rule: "evenodd",
-                    d:
-                      "M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z",
-                    clip_rule: "evenodd"
-                  )
-                end
-              end
+          ThemeToggle do
+            svg(
+              xmlns: "http://www.w3.org/2000/svg",
+              viewbox: "0 0 24 24",
+              fill: "currentColor",
+              class: "w-4 h-4"
+            ) do |s|
+              s.path(
+                d:
+                  "M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z"
+              )
             end
           end
         RUBY
@@ -51,15 +29,7 @@ def view_template
 
       render Docs::VisualCodeExample.new(title: "With text", context: self) do
         <<~RUBY
-          ThemeToggle do |toggle|
-            SetLightMode do
-              Button(variant: :primary) { "Light" }
-            end
-
-            SetDarkMode do
-              Button(variant: :primary) { "Dark" }
-            end
-          end
+          ThemeToggle { "Toggle Theme" }
         RUBY
       end
 
diff --git a/gem/lib/ruby_ui/toggle/toggle.rb b/gem/lib/ruby_ui/toggle/toggle.rb
new file mode 100644
index 000000000..ce76407b4
--- /dev/null
+++ b/gem/lib/ruby_ui/toggle/toggle.rb
@@ -0,0 +1,101 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Toggle < Base
+    BASE_CLASSES = [
+      "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap",
+      "transition-[color,box-shadow] outline-none",
+      "hover:bg-muted hover:text-muted-foreground",
+      "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+      "disabled:pointer-events-none disabled:opacity-50",
+      "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
+      "data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+      "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+    ].freeze
+
+    VARIANT_CLASSES = {
+      default: "bg-transparent",
+      outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground"
+    }.freeze
+
+    SIZE_CLASSES = {
+      sm: "h-8 min-w-8 px-1.5",
+      default: "h-9 min-w-9 px-2",
+      lg: "h-10 min-w-10 px-2.5"
+    }.freeze
+
+    def self.classes_for(variant:, size:)
+      [BASE_CLASSES, VARIANT_CLASSES.fetch(variant, VARIANT_CLASSES[:default]), SIZE_CLASSES.fetch(size, SIZE_CLASSES[:default])]
+    end
+
+    def initialize(
+      pressed: false,
+      name: nil,
+      value: "1",
+      unpressed_value: nil,
+      variant: :default,
+      size: :default,
+      disabled: false,
+      wrapper: {},
+      **attrs
+    )
+      @pressed = pressed
+      @name = name
+      @value = value
+      @unpressed_value = unpressed_value
+      @variant = variant.to_sym
+      @size = size.to_sym
+      @disabled = disabled
+      @wrapper = wrapper
+      super(**attrs)
+    end
+
+    def view_template(&block)
+      span(**wrapper_attrs) do
+        button(**attrs, &block)
+        render_hidden_input if @name
+      end
+    end
+
+    private
+
+    def wrapper_attrs
+      mix(wrapper_default_attrs, @wrapper)
+    end
+
+    def wrapper_default_attrs
+      {
+        class: "contents",
+        data: {
+          controller: "ruby-ui--toggle",
+          action: "click->ruby-ui--toggle#toggle",
+          "ruby-ui--toggle-pressed-value": @pressed.to_s,
+          "ruby-ui--toggle-value-value": @value.to_s,
+          "ruby-ui--toggle-unpressed-value-value": @unpressed_value.to_s
+        }
+      }
+    end
+
+    def render_hidden_input
+      input(
+        type: "hidden",
+        name: @name,
+        value: @pressed ? @value : @unpressed_value.to_s,
+        data: {"ruby-ui--toggle-target": "input"}
+      )
+    end
+
+    def default_attrs
+      base = {type: "button"}
+      base[:disabled] = true if @disabled
+      base.merge(
+        aria: {pressed: @pressed.to_s},
+        data: {
+          state: @pressed ? "on" : "off",
+          "ruby-ui--toggle-target": "button"
+        },
+        class: self.class.classes_for(variant: @variant, size: @size)
+      )
+    end
+  end
+end
diff --git a/gem/lib/ruby_ui/toggle/toggle_controller.js b/gem/lib/ruby_ui/toggle/toggle_controller.js
new file mode 100644
index 000000000..259488760
--- /dev/null
+++ b/gem/lib/ruby_ui/toggle/toggle_controller.js
@@ -0,0 +1,33 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="ruby-ui--toggle"
+// Sits on a wrapper element; the visible <button> and optional hidden <input>
+// are descendants so Stimulus can target them.
+export default class extends Controller {
+  static targets = ["button", "input"]
+  static values = {
+    pressed: Boolean,
+    value: String,
+    unpressedValue: String
+  }
+
+  toggle(event) {
+    if (this.buttonTarget.disabled) return
+    this.pressedValue = !this.pressedValue
+  }
+
+  pressedValueChanged(current, previous) {
+    if (this.hasButtonTarget) {
+      this.buttonTarget.setAttribute("aria-pressed", current ? "true" : "false")
+      this.buttonTarget.dataset.state = current ? "on" : "off"
+    }
+
+    if (this.hasInputTarget) {
+      this.inputTarget.value = current ? this.valueValue : this.unpressedValueValue
+    }
+
+    if (previous !== undefined) {
+      this.dispatch("change", { detail: { pressed: current }, bubbles: true })
+    }
+  }
+}
diff --git a/gem/lib/ruby_ui/toggle_group/toggle_group.rb b/gem/lib/ruby_ui/toggle_group/toggle_group.rb
new file mode 100644
index 000000000..e2c6f574a
--- /dev/null
+++ b/gem/lib/ruby_ui/toggle_group/toggle_group.rb
@@ -0,0 +1,119 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ToggleGroup < Base
+    SPACING_GAP = {0 => nil, 1 => "gap-1", 2 => "gap-2", 3 => "gap-3", 4 => "gap-4"}.freeze
+    VALID_TYPES = [:single, :multiple].freeze
+    VALID_ORIENTATIONS = [:horizontal, :vertical].freeze
+
+    def initialize(
+      type: :single,
+      name: nil,
+      value: nil,
+      variant: :default,
+      size: :default,
+      disabled: false,
+      spacing: 0,
+      orientation: :horizontal,
+      **attrs
+    )
+      @type = type.to_sym
+      raise ArgumentError, "type must be :single or :multiple" unless VALID_TYPES.include?(@type)
+
+      @orientation = orientation.to_sym
+      raise ArgumentError, "orientation must be :horizontal or :vertical" unless VALID_ORIENTATIONS.include?(@orientation)
+
+      raise ArgumentError, "spacing must be an Integer 0..4" unless spacing.is_a?(Integer) && (0..4).cover?(spacing)
+
+      @name = name
+      @value = value
+      @variant = variant.to_sym
+      @size = size.to_sym
+      @disabled = disabled
+      @spacing = spacing
+      super(**attrs)
+    end
+
+    def view_template(&block)
+      div(**attrs) do
+        yield(self)
+        render_hidden_inputs
+      end
+    end
+
+    def item_context
+      {
+        type: @type,
+        variant: @variant,
+        size: @size,
+        disabled: @disabled,
+        selected_values: selected_values,
+        spacing: @spacing,
+        orientation: @orientation
+      }
+    end
+
+    def ToggleGroupItem(**kwargs, &block)
+      render RubyUI::ToggleGroupItem.new(group_context: item_context, **kwargs), &block
+    end
+
+    private
+
+    def selected_values
+      case @type
+      when :single then @value.nil? ? [] : [@value.to_s]
+      when :multiple then Array(@value).map(&:to_s)
+      end
+    end
+
+    def render_hidden_inputs
+      return unless @name
+
+      if @type == :single
+        input(
+          type: "hidden",
+          name: @name,
+          value: selected_values.first.to_s,
+          data: {"ruby-ui--toggle-group-target": "input"}
+        )
+      else
+        selected_values.each do |v|
+          input(
+            type: "hidden",
+            name: "#{@name}[]",
+            value: v,
+            data: {"ruby-ui--toggle-group-target": "input"}
+          )
+        end
+      end
+    end
+
+    def default_attrs
+      {
+        role: (@type == :single) ? "radiogroup" : "group",
+        data: {
+          controller: "ruby-ui--toggle-group",
+          "ruby-ui--toggle-group-type-value": @type.to_s,
+          "ruby-ui--toggle-group-name-value": @name.to_s,
+          orientation: @orientation.to_s,
+          spacing: @spacing.to_s
+        },
+        class: container_classes
+      }
+    end
+
+    def container_classes
+      base = if @orientation == :vertical
+        "flex w-fit flex-col items-stretch rounded-md"
+      else
+        "flex w-fit items-center rounded-md"
+      end
+
+      [
+        base,
+        SPACING_GAP[@spacing],
+        (@spacing == 0 && @variant == :outline) ? "shadow-xs" : nil
+      ].compact
+    end
+  end
+end
diff --git a/gem/lib/ruby_ui/toggle_group/toggle_group_controller.js b/gem/lib/ruby_ui/toggle_group/toggle_group_controller.js
new file mode 100644
index 000000000..00121ec0b
--- /dev/null
+++ b/gem/lib/ruby_ui/toggle_group/toggle_group_controller.js
@@ -0,0 +1,126 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="ruby-ui--toggle-group"
+export default class extends Controller {
+  static targets = ["item", "input"]
+  static values = { type: String, name: String }
+
+  connect() {
+    this.reconcile()
+  }
+
+  select(event) {
+    const item = event.currentTarget
+    if (item.disabled) return
+
+    if (this.typeValue === "single") {
+      this.itemTargets.forEach(el => this.setPressed(el, el === item))
+    } else {
+      this.setPressed(item, !this.isPressed(item))
+    }
+
+    this.rebuildInputs()
+    this.updateRovingTabindex(item)
+  }
+
+  navigate(event) {
+    if (this.typeValue !== "single") return
+    const items = this.enabledItems()
+    if (items.length === 0) return
+
+    const isRtl = document.documentElement.dir === "rtl"
+    const currentIndex = items.indexOf(event.currentTarget)
+    let nextIndex = currentIndex
+
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+        nextIndex = (currentIndex + (isRtl && event.key === "ArrowRight" ? -1 : 1) + items.length) % items.length
+        break
+      case "ArrowLeft":
+      case "ArrowUp":
+        nextIndex = (currentIndex + (isRtl && event.key === "ArrowLeft" ? 1 : -1) + items.length) % items.length
+        break
+      case "Home":
+        nextIndex = 0
+        break
+      case "End":
+        nextIndex = items.length - 1
+        break
+      case " ":
+      case "Enter":
+        event.preventDefault()
+        event.currentTarget.click()
+        return
+      default:
+        return
+    }
+
+    event.preventDefault()
+    const next = items[nextIndex]
+    this.updateRovingTabindex(next)
+    next.focus()
+  }
+
+  reconcile() {
+    if (this.typeValue === "single") {
+      const pressed = this.itemTargets.find(el => this.isPressed(el))
+      const first = pressed || this.enabledItems()[0]
+      this.itemTargets.forEach(el => {
+        el.setAttribute("tabindex", el === first ? "0" : "-1")
+      })
+    } else {
+      this.itemTargets.forEach(el => el.setAttribute("tabindex", "0"))
+    }
+    this.rebuildInputs()
+  }
+
+  isPressed(item) {
+    return item.dataset.state === "on"
+  }
+
+  setPressed(item, pressed) {
+    item.dataset.state = pressed ? "on" : "off"
+    if (this.typeValue === "single") {
+      item.setAttribute("aria-checked", pressed ? "true" : "false")
+    } else {
+      item.setAttribute("aria-pressed", pressed ? "true" : "false")
+    }
+  }
+
+  updateRovingTabindex(focusedItem) {
+    if (this.typeValue !== "single") return
+    this.itemTargets.forEach(el => {
+      el.setAttribute("tabindex", el === focusedItem ? "0" : "-1")
+    })
+  }
+
+  enabledItems() {
+    return this.itemTargets.filter(el => !el.disabled)
+  }
+
+  rebuildInputs() {
+    if (!this.nameValue) return
+    this.inputTargets.forEach(el => el.remove())
+
+    const pressed = this.itemTargets.filter(el => this.isPressed(el))
+
+    if (this.typeValue === "single") {
+      const val = pressed[0]?.dataset.value || ""
+      this.element.appendChild(this.buildInput(this.nameValue, val))
+    } else {
+      pressed.forEach(item => {
+        this.element.appendChild(this.buildInput(`${this.nameValue}[]`, item.dataset.value))
+      })
+    }
+  }
+
+  buildInput(name, value) {
+    const input = document.createElement("input")
+    input.type = "hidden"
+    input.name = name
+    input.value = value
+    input.setAttribute("data-ruby-ui--toggle-group-target", "input")
+    return input
+  }
+}
diff --git a/gem/lib/ruby_ui/toggle_group/toggle_group_item.rb b/gem/lib/ruby_ui/toggle_group/toggle_group_item.rb
new file mode 100644
index 000000000..2a654f196
--- /dev/null
+++ b/gem/lib/ruby_ui/toggle_group/toggle_group_item.rb
@@ -0,0 +1,67 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ToggleGroupItem < Toggle
+    JOIN_BASE = "w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10"
+
+    def initialize(value:, group_context:, variant: nil, size: nil, **attrs)
+      @item_value = value.to_s
+      @group_context = group_context
+
+      pressed = group_context[:selected_values].include?(@item_value)
+      super(
+        pressed: pressed,
+        name: nil,
+        value: @item_value,
+        variant: variant || group_context[:variant],
+        size: size || group_context[:size],
+        disabled: group_context[:disabled],
+        **attrs
+      )
+    end
+
+    def view_template(&block)
+      button(**attrs, &block)
+    end
+
+    private
+
+    def default_attrs
+      attrs = {type: "button"}
+      attrs[:disabled] = true if @disabled
+      attrs[:data] = {
+        state: @pressed ? "on" : "off",
+        value: @item_value,
+        "ruby-ui--toggle-group-target": "item",
+        action: "click->ruby-ui--toggle-group#select keydown->ruby-ui--toggle-group#navigate"
+      }
+      attrs[:class] = [Toggle.classes_for(variant: @variant, size: @size), join_classes]
+
+      if @group_context[:type] == :single
+        attrs[:role] = "radio"
+        attrs[:aria] = {checked: @pressed.to_s}
+        attrs[:tabindex] = @pressed ? "0" : "-1"
+      else
+        attrs[:aria] = {pressed: @pressed.to_s}
+        attrs[:tabindex] = "0"
+      end
+
+      attrs
+    end
+
+    def join_classes
+      classes = [JOIN_BASE]
+      return classes unless @group_context[:spacing] == 0
+
+      classes << "rounded-none shadow-none"
+      if @group_context[:orientation] == :vertical
+        classes << "first-of-type:rounded-t-md last-of-type:rounded-b-md"
+        classes << "border-t-0 first-of-type:border-t" if @group_context[:variant] == :outline
+      else
+        classes << "first-of-type:rounded-l-md last-of-type:rounded-r-md"
+        classes << "border-l-0 first-of-type:border-l" if @group_context[:variant] == :outline
+      end
+      classes
+    end
+  end
+end
diff --git a/gem/test/ruby_ui/theme_toggle_test.rb b/gem/test/ruby_ui/theme_toggle_test.rb
index 3ad57de8a..b81848e91 100644
--- a/gem/test/ruby_ui/theme_toggle_test.rb
+++ b/gem/test/ruby_ui/theme_toggle_test.rb
@@ -3,19 +3,21 @@
 require "test_helper"
 
 class RubyUI::ThemeToggleTest < ComponentTest
-  def test_render_with_all_items
-    output = phlex do
-      RubyUI.ThemeToggle do |toggle|
-        RubyUI.SetLightMode do
-          RubyUI.Button(variant: :primary) { "Light" }
-        end
+  def test_renders_as_toggle_button
+    output = phlex { RubyUI.ThemeToggle { "icon" } }
+    assert_match(/<button[^>]*type="button"/, output)
+    assert_match(/aria-pressed=/, output)
+  end
 
-        RubyUI.SetDarkMode do
-          RubyUI.Button(variant: :primary) { "Dark" }
-        end
-      end
-    end
+  def test_wires_theme_toggle_controller
+    output = phlex { RubyUI.ThemeToggle { "icon" } }
+    assert_match(/data-controller="[^"]*ruby-ui--theme-toggle/, output)
+    assert_match(/data-controller="[^"]*ruby-ui--toggle/, output)
+    assert_match(/ruby-ui--toggle:change->ruby-ui--theme-toggle#apply/, output)
+  end
 
-    assert_match(/Dark/, output)
+  def test_block_content_rendered
+    output = phlex { RubyUI.ThemeToggle { "SUN_AND_MOON" } }
+    assert_match(/SUN_AND_MOON/, output)
   end
 end
diff --git a/gem/test/ruby_ui/toggle_group_test.rb b/gem/test/ruby_ui/toggle_group_test.rb
new file mode 100644
index 000000000..63439274b
--- /dev/null
+++ b/gem/test/ruby_ui/toggle_group_test.rb
@@ -0,0 +1,153 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class RubyUI::ToggleGroupTest < ComponentTest
+  def test_single_uses_radiogroup_role
+    output = phlex do
+      RubyUI.ToggleGroup(type: :single, name: "align") do |g|
+        g.ToggleGroupItem(value: "left") { "L" }
+        g.ToggleGroupItem(value: "right") { "R" }
+      end
+    end
+    assert_match(/role="radiogroup"/, output)
+    assert_match(/role="radio"/, output)
+  end
+
+  def test_multiple_uses_group_role_with_aria_pressed
+    output = phlex do
+      RubyUI.ToggleGroup(type: :multiple, name: "fmt") do |g|
+        g.ToggleGroupItem(value: "bold") { "B" }
+        g.ToggleGroupItem(value: "italic") { "I" }
+      end
+    end
+    assert_match(/role="group"/, output)
+    assert_match(/aria-pressed=/, output)
+    refute_match(/role="radio"/, output)
+  end
+
+  def test_single_initial_value_sets_pressed_item
+    output = phlex do
+      RubyUI.ToggleGroup(type: :single, name: "align", value: "right") do |g|
+        g.ToggleGroupItem(value: "left") { "L" }
+        g.ToggleGroupItem(value: "right") { "R" }
+      end
+    end
+    # right item is pressed — assert both attributes appear (they are on the same button element)
+    assert_match(/data-value="right"/, output)
+    assert_match(/aria-checked="true"/, output)
+    assert_match(/data-state="on"[^>]*data-value="right"|data-value="right"[^>]*data-state="on"/, output)
+    # exactly one hidden input with selected value
+    assert_match(/<input[^>]*type="hidden"[^>]*name="align"[^>]*value="right"/, output)
+  end
+
+  def test_multiple_initial_value_array_pressed
+    output = phlex do
+      RubyUI.ToggleGroup(type: :multiple, name: "fmt", value: %w[bold italic]) do |g|
+        g.ToggleGroupItem(value: "bold") { "B" }
+        g.ToggleGroupItem(value: "italic") { "I" }
+        g.ToggleGroupItem(value: "underline") { "U" }
+      end
+    end
+    assert_match(/<input[^>]*name="fmt\[\]"[^>]*value="bold"/, output)
+    assert_match(/<input[^>]*name="fmt\[\]"[^>]*value="italic"/, output)
+    refute_match(/<input[^>]*name="fmt\[\]"[^>]*value="underline"/, output)
+  end
+
+  def test_single_roving_tabindex
+    output = phlex do
+      RubyUI.ToggleGroup(type: :single, name: "align", value: "left") do |g|
+        g.ToggleGroupItem(value: "left") { "L" }
+        g.ToggleGroupItem(value: "right") { "R" }
+      end
+    end
+    assert_equal 1, output.scan('tabindex="0"').size
+    assert_match(/tabindex="-1"/, output)
+  end
+
+  def test_disabled_group_disables_all_items
+    output = phlex do
+      RubyUI.ToggleGroup(type: :multiple, name: "fmt", disabled: true) do |g|
+        g.ToggleGroupItem(value: "bold") { "B" }
+        g.ToggleGroupItem(value: "italic") { "I" }
+      end
+    end
+    assert_equal 2, output.scan(/<button[^>]*disabled/).size
+  end
+
+  def test_group_controller_attached
+    output = phlex do
+      RubyUI.ToggleGroup(type: :single, name: "align") do |g|
+        g.ToggleGroupItem(value: "left") { "L" }
+      end
+    end
+    assert_match(/data-controller="[^"]*ruby-ui--toggle-group/, output)
+    assert_match(/data-ruby-ui--toggle-group-type-value="single"/, output)
+    assert_match(/data-ruby-ui--toggle-group-name-value="align"/, output)
+  end
+
+  def test_group_items_dont_have_standalone_toggle_controller
+    output = phlex do
+      RubyUI.ToggleGroup(type: :single, name: "align") do |g|
+        g.ToggleGroupItem(value: "left") { "L" }
+      end
+    end
+    # group controller present on wrapper, but item buttons should not be tagged with single-toggle controller
+    refute_match(/<button[^>]*data-controller="[^"]*ruby-ui--toggle"/, output)
+  end
+
+  def test_joined_items_have_first_last_rounded
+    output = phlex do
+      RubyUI.ToggleGroup(type: :single, name: "x") do |g|
+        g.ToggleGroupItem(value: "a") { "A" }
+        g.ToggleGroupItem(value: "b") { "B" }
+      end
+    end
+    assert_match(/rounded-none/, output)
+    assert_match(/first-of-type:rounded-l-md/, output)
+    assert_match(/last-of-type:rounded-r-md/, output)
+  end
+
+  def test_spacing_adds_gap_class
+    output = phlex do
+      RubyUI.ToggleGroup(type: :single, name: "x", spacing: 2) do |g|
+        g.ToggleGroupItem(value: "a") { "A" }
+        g.ToggleGroupItem(value: "b") { "B" }
+      end
+    end
+    assert_match(/gap-2/, output)
+    refute_match(/rounded-none/, output)
+  end
+
+  def test_vertical_orientation
+    output = phlex do
+      RubyUI.ToggleGroup(type: :single, name: "x", orientation: :vertical) do |g|
+        g.ToggleGroupItem(value: "a") { "A" }
+        g.ToggleGroupItem(value: "b") { "B" }
+      end
+    end
+    assert_match(/flex-col/, output)
+    assert_match(/first-of-type:rounded-t-md/, output)
+  end
+
+  def test_outline_joined_adds_shadow_xs
+    output = phlex do
+      RubyUI.ToggleGroup(type: :single, name: "x", variant: :outline) do |g|
+        g.ToggleGroupItem(value: "a") { "A" }
+      end
+    end
+    assert_match(/shadow-xs/, output)
+    assert_match(/border-l-0/, output)
+    assert_match(/first-of-type:border-l/, output)
+  end
+
+  def test_invalid_orientation_raises
+    assert_raises(ArgumentError) do
+      phlex do
+        RubyUI.ToggleGroup(type: :single, name: "x", orientation: :diagonal) do |g|
+          g.ToggleGroupItem(value: "a") { "A" }
+        end
+      end
+    end
+  end
+end
diff --git a/gem/test/ruby_ui/toggle_test.rb b/gem/test/ruby_ui/toggle_test.rb
new file mode 100644
index 000000000..4c278a743
--- /dev/null
+++ b/gem/test/ruby_ui/toggle_test.rb
@@ -0,0 +1,68 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class RubyUI::ToggleTest < ComponentTest
+  def test_renders_button_unpressed_by_default
+    output = phlex { RubyUI.Toggle { "Bold" } }
+    assert_match(/<button[^>]*type="button"/, output)
+    assert_match(/aria-pressed="false"/, output)
+    assert_match(/data-state="off"/, output)
+    assert_match(/Bold/, output)
+  end
+
+  def test_renders_pressed_when_pressed_true
+    output = phlex { RubyUI.Toggle(pressed: true) { "Bold" } }
+    assert_match(/aria-pressed="true"/, output)
+    assert_match(/data-state="on"/, output)
+  end
+
+  def test_renders_hidden_input_when_name_present
+    output = phlex { RubyUI.Toggle(name: "bold", value: "1") { "Bold" } }
+    assert_match(/<input[^>]*type="hidden"[^>]*name="bold"/, output)
+    assert_match(/value=""/, output)
+  end
+
+  def test_hidden_input_value_reflects_pressed
+    output = phlex { RubyUI.Toggle(name: "bold", value: "1", pressed: true) { "Bold" } }
+    assert_match(/<input[^>]*name="bold"[^>]*value="1"/, output)
+  end
+
+  def test_no_hidden_input_when_name_absent
+    output = phlex { RubyUI.Toggle { "Bold" } }
+    refute_match(/type="hidden"/, output)
+  end
+
+  def test_outline_variant_applies_border_class
+    output = phlex { RubyUI.Toggle(variant: :outline) { "x" } }
+    assert_match(/border-input/, output)
+  end
+
+  def test_size_sm_applies_h8
+    output = phlex { RubyUI.Toggle(size: :sm) { "x" } }
+    assert_match(/h-8/, output)
+  end
+
+  def test_size_lg_applies_h10
+    output = phlex { RubyUI.Toggle(size: :lg) { "x" } }
+    assert_match(/h-10/, output)
+  end
+
+  def test_disabled_sets_attribute
+    output = phlex { RubyUI.Toggle(disabled: true) { "x" } }
+    assert_match(/<button[^>]*disabled/, output)
+  end
+
+  def test_includes_stimulus_controller_and_action
+    output = phlex { RubyUI.Toggle { "x" } }
+    assert_match(/data-controller="[^"]*ruby-ui--toggle/, output)
+    assert_match(/data-action="[^"]*click->ruby-ui--toggle#toggle/, output)
+  end
+
+  def test_includes_stimulus_values
+    output = phlex { RubyUI.Toggle(value: "x", unpressed_value: "y", pressed: true) { "x" } }
+    assert_match(/data-ruby-ui--toggle-pressed-value="true"/, output)
+    assert_match(/data-ruby-ui--toggle-value-value="x"/, output)
+    assert_match(/data-ruby-ui--toggle-unpressed-value-value="y"/, output)
+  end
+end