diff --git a/docs/webapi/dontSeeButtonIsPressed.mustache b/docs/webapi/dontSeeButtonIsPressed.mustache
new file mode 100644
index 000000000..0a19d0823
--- /dev/null
+++ b/docs/webapi/dontSeeButtonIsPressed.mustache
@@ -0,0 +1,9 @@
+Verifies that a toggle button is not pressed, by reading its `aria-pressed` attribute.
+
+```js
+I.dontSeeButtonIsPressed('Bold');
+I.dontSeeButtonIsPressed('#bold');
+```
+
+@param {CodeceptJS.LocatorOrString} locator button located by text|CSS|XPath|strict locator.
+@returns {void} automatically synchronized promise through #recorder
diff --git a/docs/webapi/seeButtonIsPressed.mustache b/docs/webapi/seeButtonIsPressed.mustache
new file mode 100644
index 000000000..1f4b358e9
--- /dev/null
+++ b/docs/webapi/seeButtonIsPressed.mustache
@@ -0,0 +1,9 @@
+Verifies that a toggle button is pressed, by reading its `aria-pressed` attribute.
+
+```js
+I.seeButtonIsPressed('Bold');
+I.seeButtonIsPressed('#bold');
+```
+
+@param {CodeceptJS.LocatorOrString} locator button located by text|CSS|XPath|strict locator.
+@returns {void} automatically synchronized promise through #recorder
diff --git a/docs/webapi/toggleButton.mustache b/docs/webapi/toggleButton.mustache
new file mode 100644
index 000000000..efced45ba
--- /dev/null
+++ b/docs/webapi/toggleButton.mustache
@@ -0,0 +1,13 @@
+Toggles a button that reports its state with `aria-pressed`, like a Toggle or a Toggle Group item.
+
+Such a button is not a checkbox, so `checkOption` does not apply to it: this action flips it and
+waits until `aria-pressed` has changed.
+
+```js
+I.toggleButton('Bold');
+I.toggleButton('#bold');
+I.toggleButton({ css: '[aria-label=Bold]' });
+```
+
+@param {CodeceptJS.LocatorOrString} locator button located by text|CSS|XPath|strict locator.
+@returns {void} automatically synchronized promise through #recorder
diff --git a/lib/helper/Playwright.js b/lib/helper/Playwright.js
index 939988c9a..2bc0291e5 100644
--- a/lib/helper/Playwright.js
+++ b/lib/helper/Playwright.js
@@ -50,6 +50,8 @@ let defaultSelectorEnginesInitialized = false
 const popupStore = new Popup()
 const consoleLogStore = new Console()
 const availableBrowsers = ['chromium', 'webkit', 'firefox', 'electron']
+const ariaCheckableRoles = ['menuitemcheckbox', 'menuitemradio']
+const checkableRoles = ['checkbox', 'radio', 'switch', ...ariaCheckableRoles]
 
 import { setRestartStrategy, restartsSession, restartsContext, restartsBrowser } from './extras/PlaywrightRestartOpts.js'
 import { createValueEngine, createDisabledEngine } from './extras/PlaywrightPropEngine.js'
@@ -1563,7 +1565,14 @@ class Playwright extends Helper {
     if (supportedTypes.includes(type)) {
       return el.isChecked(options)
     }
-    throw new Error(`Element is not a ${supportedTypes.join(' or ')} input`)
+
+    for (const attribute of ['aria-checked', 'aria-pressed']) {
+      const state = await el.getAttribute(attribute)
+      if (state !== null) return state === 'true'
+    }
+
+    const role = await el.getAttribute('role')
+    throw new Error(`Element is not a ${supportedTypes.join(' or ')} input and has no aria-checked or aria-pressed state (role: ${role || 'none'})`)
   }
   /**
    * Return the disabled status of given element.
@@ -2162,7 +2171,7 @@ class Playwright extends Helper {
    */
   async checkOption(field, context = null, options = { force: true }) {
     const elm = await this._locateCheckable(field, context)
-    await elm.check(options)
+    await setCheckableState.call(this, elm, true, field, options)
     return this._waitForAction()
   }
 
@@ -2182,7 +2191,7 @@ class Playwright extends Helper {
    */
   async uncheckOption(field, context = null, options = { force: true }) {
     const elm = await this._locateCheckable(field, context)
-    await elm.uncheck(options)
+    await setCheckableState.call(this, elm, false, field, options)
     return this._waitForAction()
   }
 
@@ -2200,6 +2209,39 @@ class Playwright extends Helper {
     return proceedIsChecked.call(this, 'negate', field)
   }
 
+  /**
+   * {{> toggleButton }}
+   */
+  async toggleButton(locator, options = {}) {
+    const els = await this._locateClickable(locator)
+    assertElementExists(els, locator, 'Toggle button')
+    const el = selectElement(els, locator, this)
+    const pressed = await el.getAttribute('aria-pressed')
+    if (pressed === null) {
+      throw new Error(`Element ${new Locator(locator)} is not a toggle button, it has no aria-pressed attribute`)
+    }
+
+    await highlightActiveElement.call(this, el)
+    await el.click(options)
+    await waitForAriaState(el, 'aria-pressed', pressed !== 'true', locator)
+
+    return this._waitForAction()
+  }
+
+  /**
+   * {{> seeButtonIsPressed }}
+   */
+  async seeButtonIsPressed(locator) {
+    return proceedIsPressed.call(this, 'assert', locator)
+  }
+
+  /**
+   * {{> dontSeeButtonIsPressed }}
+   */
+  async dontSeeButtonIsPressed(locator) {
+    return proceedIsPressed.call(this, 'negate', locator)
+  }
+
   /**
    * {{> pressKeyDown }}
    */
@@ -4385,6 +4427,17 @@ async function findCheckable(locator, context) {
     return findElements.call(this, contextEl, matchedLocator)
   }
 
+  for (const exact of [true, false]) {
+    for (const role of checkableRoles) {
+      try {
+        const roleEls = await contextEl.getByRole(role, { name: matchedLocator.value, exact }).all()
+        if (roleEls.length) return roleEls
+      } catch (err) {
+        // getByRole not supported or failed
+      }
+    }
+  }
+
   const literal = xpathLocator.literal(matchedLocator.value)
   let els = await findElements.call(this, contextEl, Locator.checkable.byText(literal))
   if (els.length) {
@@ -4400,11 +4453,72 @@ async function findCheckable(locator, context) {
 async function proceedIsChecked(assertType, option) {
   let els = await findCheckable.call(this, option)
   assertElementExists(els, option, 'Checkable')
-  els = await Promise.all(els.map(el => el.isChecked()))
+  els = await Promise.all(els.map(el => isElementChecked(el, option)))
   const selected = els.reduce((prev, cur) => prev || cur)
   return truth(`checkable ${option}`, 'to be checked')[assertType](selected)
 }
 
+async function isElementChecked(el, locator) {
+  try {
+    return await el.isChecked()
+  } catch (err) {
+    const checked = await el.getAttribute('aria-checked')
+    if (checked !== null) return checked === 'true'
+
+    const pressed = await el.getAttribute('aria-pressed')
+    if (pressed !== null) {
+      throw new Error(`Element ${new Locator(locator)} is a toggle button with aria-pressed="${pressed}", use seeButtonIsPressed to assert its state`)
+    }
+    throw err
+  }
+}
+
+async function setCheckableState(el, expected, locator, options = {}) {
+  const role = await el.getAttribute('role')
+  if (!ariaCheckableRoles.includes(role)) {
+    return expected ? el.check(options) : el.uncheck(options)
+  }
+
+  const current = await el.getAttribute('aria-checked')
+  if (current === null) {
+    throw new Error(`Element ${new Locator(locator)} with role "${role}" has no aria-checked state`)
+  }
+  if ((current === 'true') === expected) return
+
+  await el.click(options)
+  await waitForAriaState(el, 'aria-checked', expected, locator)
+}
+
+async function waitForAriaState(el, attribute, expected, locator) {
+  const deadline = Date.now() + 2000
+
+  while (Date.now() < deadline) {
+    if (!(await el.isVisible().catch(() => false))) return
+
+    const state = await el.getAttribute(attribute, { timeout: 1000 }).catch(() => null)
+    if (state === null) return
+    if ((state === 'true') === expected) return
+
+    await new Promise(resolve => setTimeout(resolve, 50))
+  }
+
+  throw new Error(`Element ${new Locator(locator)} was clicked but its ${attribute} did not become "${expected}"`)
+}
+
+async function proceedIsPressed(assertType, locator) {
+  const matcher = await this._getContext()
+  const els = await findClickable.call(this, matcher, locator)
+  assertElementExists(els, locator, 'Toggle button')
+
+  const states = await Promise.all(els.map(el => el.getAttribute('aria-pressed')))
+  if (states.every(state => state === null)) {
+    throw new Error(`Element ${new Locator(locator)} is not a toggle button, it has no aria-pressed attribute`)
+  }
+
+  const pressed = states.some(state => state === 'true')
+  return truth(`toggle button ${locator}`, 'to be pressed')[assertType](pressed)
+}
+
 async function findFields(locator, context = null) {
   let contextEl
   if (context) {
diff --git a/lib/helper/Puppeteer.js b/lib/helper/Puppeteer.js
index ff00f6dd8..ee713eee1 100644
--- a/lib/helper/Puppeteer.js
+++ b/lib/helper/Puppeteer.js
@@ -64,6 +64,7 @@ function wrapError(e) {
 let perfTiming
 const popupStore = new Popup()
 const consoleLogStore = new Console()
+const checkableRoles = ['checkbox', 'radio', 'switch', 'menuitemcheckbox', 'menuitemradio']
 
 /**
  * ## Configuration
@@ -1515,6 +1516,40 @@ class Puppeteer extends Helper {
     return proceedIsChecked.call(this, 'negate', field)
   }
 
+  /**
+   * {{> toggleButton }}
+   */
+  async toggleButton(locator) {
+    const els = await this._locateClickable(locator)
+    assertElementExists(els, locator, 'Toggle button')
+    const el = selectElement(els, locator, this)
+    const pressed = await grabAriaState(el, 'aria-pressed')
+    if (pressed === null) {
+      throw new Error(`Element ${new Locator(locator)} is not a toggle button, it has no aria-pressed attribute`)
+    }
+
+    highlightActiveElement.call(this, el, await this._getContext())
+
+    await el.click()
+    await waitForAriaState(el, 'aria-pressed', pressed !== 'true', locator)
+
+    return this._waitForAction()
+  }
+
+  /**
+   * {{> seeButtonIsPressed }}
+   */
+  async seeButtonIsPressed(locator) {
+    return proceedIsPressed.call(this, 'assert', locator)
+  }
+
+  /**
+   * {{> dontSeeButtonIsPressed }}
+   */
+  async dontSeeButtonIsPressed(locator) {
+    return proceedIsPressed.call(this, 'negate', locator)
+  }
+
   /**
    * {{> pressKeyDown }}
    */
@@ -3192,8 +3227,19 @@ async function findCheckable(locator, context) {
     return findElements.call(this, contextEl, matchedLocator)
   }
 
+  // Try ARIA selector for accessible name
+  let els
+  for (const role of checkableRoles) {
+    try {
+      els = await contextEl.$$(`::-p-aria([name="${matchedLocator.value}"][role="${role}"])`)
+      if (els.length) return els
+    } catch (err) {
+      // ARIA selector not supported or failed
+    }
+  }
+
   const literal = xpathLocator.literal(matchedLocator.value)
-  let els = await findElements.call(this, contextEl, Locator.checkable.byText(literal))
+  els = await findElements.call(this, contextEl, Locator.checkable.byText(literal))
   if (els.length) {
     return els
   }
@@ -3202,14 +3248,6 @@ async function findCheckable(locator, context) {
     return els
   }
 
-  // Try ARIA selector for accessible name
-  try {
-    els = await contextEl.$$(`::-p-aria(${matchedLocator.value})`)
-    if (els.length) return els
-  } catch (err) {
-    // ARIA selector not supported or failed
-  }
-
   return findElements.call(this, contextEl, matchedLocator.value)
 }
 
@@ -3237,6 +3275,37 @@ async function proceedIsChecked(assertType, option) {
   return truth(`checkable ${option}`, 'to be checked')[assertType](selected)
 }
 
+async function grabAriaState(el, attribute) {
+  return el.evaluate((node, name) => node.getAttribute(name), attribute).catch(() => null)
+}
+
+async function waitForAriaState(el, attribute, expected, locator) {
+  const deadline = Date.now() + 2000
+
+  while (Date.now() < deadline) {
+    const state = await grabAriaState(el, attribute)
+    if (state === null) return
+    if ((state === 'true') === expected) return
+
+    await new Promise(resolve => setTimeout(resolve, 50))
+  }
+
+  throw new Error(`Element ${new Locator(locator)} was clicked but its ${attribute} did not become "${expected}"`)
+}
+
+async function proceedIsPressed(assertType, locator) {
+  const els = await this._locateClickable(locator)
+  assertElementExists(els, locator, 'Toggle button')
+
+  const states = await Promise.all(els.map(el => grabAriaState(el, 'aria-pressed')))
+  if (states.every(state => state === null)) {
+    throw new Error(`Element ${new Locator(locator)} is not a toggle button, it has no aria-pressed attribute`)
+  }
+
+  const pressed = states.some(state => state === 'true')
+  return truth(`toggle button ${locator}`, 'to be pressed')[assertType](pressed)
+}
+
 async function findVisibleFields(locator, context = null) {
   const els = await findFields.call(this, locator, context)
   const visible = await Promise.all(els.map(el => el.boundingBox()))
diff --git a/lib/helper/WebDriver.js b/lib/helper/WebDriver.js
index 62c0b4dc2..722d9a573 100644
--- a/lib/helper/WebDriver.js
+++ b/lib/helper/WebDriver.js
@@ -1635,6 +1635,41 @@ class WebDriver extends Helper {
     return proceedSeeCheckbox.call(this, 'negate', field)
   }
 
+  /**
+   * {{> toggleButton }}
+   */
+  async toggleButton(locator) {
+    const clickMethod = this.browser.isMobile && this.browser.capabilities.platformName !== 'android' ? 'touchClick' : 'elementClick'
+    const locateFn = prepareLocateFn.call(this)
+
+    const res = await findClickable.call(this, locator, locateFn)
+    assertElementExists(res, locator, 'Toggle button')
+    const elem = selectElement(res, locator, this)
+    const elementId = getElementId(elem)
+    const pressed = await this.browser.getElementAttribute(elementId, 'aria-pressed')
+    if (pressed === null) {
+      throw new Error(`Element ${new Locator(locator)} is not a toggle button, it has no aria-pressed attribute`)
+    }
+    highlightActiveElement.call(this, elem)
+
+    await this.browser[clickMethod](elementId)
+    return waitForAriaState.call(this, elementId, 'aria-pressed', pressed !== 'true', locator)
+  }
+
+  /**
+   * {{> seeButtonIsPressed }}
+   */
+  async seeButtonIsPressed(locator) {
+    return proceedIsPressed.call(this, 'assert', locator)
+  }
+
+  /**
+   * {{> dontSeeButtonIsPressed }}
+   */
+  async dontSeeButtonIsPressed(locator) {
+    return proceedIsPressed.call(this, 'negate', locator)
+  }
+
   /**
    * {{> seeElement }}
    *
@@ -3189,7 +3224,10 @@ function toArray(item) {
 }
 
 async function proceedSeeCheckbox(assertType, field) {
-  const res = await findFields.call(this, field)
+  let res = await findFields.call(this, field)
+  if (!res.length) {
+    res = await findCheckable.call(this, field, prepareLocateFn.call(this))
+  }
   assertElementExists(res, field, 'Field')
 
   const selected = await forEachAsync(res, async el => {
@@ -3224,6 +3262,36 @@ async function getElementTextAttributes(element) {
   return [ariaLabel, placeholder, innerText, labelText]
 }
 
+async function waitForAriaState(elementId, attribute, expected, locator) {
+  const deadline = Date.now() + 2000
+
+  while (Date.now() < deadline) {
+    const state = await this.browser.getElementAttribute(elementId, attribute).catch(() => null)
+    if (state === null) return
+    if ((state === 'true') === expected) return
+
+    await new Promise(resolve => setTimeout(resolve, 50))
+  }
+
+  throw new Error(`Element ${new Locator(locator)} was clicked but its ${attribute} did not become "${expected}"`)
+}
+
+async function proceedIsPressed(assertType, locator) {
+  const res = await findClickable.call(this, locator, prepareLocateFn.call(this))
+  assertElementExists(res, locator, 'Toggle button')
+
+  const states = []
+  for (const el of res) {
+    states.push(await this.browser.getElementAttribute(getElementId(el), 'aria-pressed'))
+  }
+  if (states.every(state => state === null)) {
+    throw new Error(`Element ${new Locator(locator)} is not a toggle button, it has no aria-pressed attribute`)
+  }
+
+  const pressed = states.some(state => state === 'true')
+  return truth(`toggle button ${locator}`, 'to be pressed')[assertType](pressed)
+}
+
 async function isElementChecked(browser, elementId) {
   let isChecked = await browser.isElementSelected(elementId)
   if (!isChecked) {
@@ -3245,24 +3313,39 @@ async function findCheckable(locator, locateFn) {
   if (locator.isRole()) return locateFn(locator, true)
   if (!locator.isFuzzy()) return locateFn(locator, true)
 
-  const literal = xpathLocator.literal(locator.value)
-  els = await locateFn(Locator.checkable.byText(literal))
-  if (els.length) return els
-
   // Try ARIA selector for accessible name
   try {
-    els = await locateFn(`aria/${locator.value}`)
+    els = await keepCheckable.call(this, await locateFn(`aria/${locator.value}`))
     if (els.length) return els
   } catch (e) {
     // ARIA selector not supported or failed
   }
 
+  const literal = xpathLocator.literal(locator.value)
+  els = await locateFn(Locator.checkable.byText(literal))
+  if (els.length) return els
+
   els = await locateFn(Locator.checkable.byName(literal))
   if (els.length) return els
 
   return await locateFn(locator.value) // by css or xpath
 }
 
+async function keepCheckable(els) {
+  if (!els || !els.length) return []
+
+  const checkable = await this.browser.execute(function () {
+    return Array.prototype.slice.call(arguments).map(function (el) {
+      if (!el) return false
+      const role = el.getAttribute('role')
+      if (role) return ['checkbox', 'radio', 'switch', 'menuitemcheckbox', 'menuitemradio'].indexOf(role) > -1
+      return el.tagName === 'INPUT' && (el.type === 'checkbox' || el.type === 'radio')
+    })
+  }, ...els)
+
+  return els.filter((el, index) => checkable[index])
+}
+
 function withStrictLocator(locator) {
   locator = new Locator(locator)
   return locator.simplify()
diff --git a/test/data/app/view/form/checkable/baseui.php b/test/data/app/view/form/checkable/baseui.php
new file mode 100644
index 000000000..c06ad5258
--- /dev/null
+++ b/test/data/app/view/form/checkable/baseui.php
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Base UI Checkables</title>
+    <style>
+        body { font-family: Arial, sans-serif; }
+        .row { margin: 12px 0; display: flex; align-items: center; gap: 8px; }
+        label { font-weight: bold; }
+        span[role="checkbox"], span[role="radio"] { display: inline-block; width: 20px; height: 20px; border: 1px solid #666; background: #fff; border-radius: 3px; }
+        span[role="checkbox"][data-checked], span[role="radio"][data-checked] { background: #2a6; }
+        span[role="switch"] { display: inline-block; width: 42px; height: 22px; border: 1px solid #666; background: #ddd; border-radius: 11px; }
+        span[role="switch"][data-checked] { background: #2a6; }
+    </style>
+    <script type="importmap">
+    {"imports": {
+      "react": "https://esm.sh/react@19.2.0",
+      "react/jsx-runtime": "https://esm.sh/react@19.2.0/jsx-runtime",
+      "react-dom": "https://esm.sh/react-dom@19.2.0",
+      "react-dom/client": "https://esm.sh/react-dom@19.2.0/client"
+    }}
+    </script>
+</head>
+<body>
+    <h1>Base UI Checkables</h1>
+    <div id="root"></div>
+    <script type="module">
+        import * as React from 'react'
+        import { createRoot } from 'react-dom/client'
+        import { Checkbox } from 'https://esm.sh/@base-ui/react@1.8.0/checkbox?external=react,react-dom'
+        import { Switch } from 'https://esm.sh/@base-ui/react@1.8.0/switch?external=react,react-dom'
+        import { Radio } from 'https://esm.sh/@base-ui/react@1.8.0/radio?external=react,react-dom'
+        import { RadioGroup } from 'https://esm.sh/@base-ui/react@1.8.0/radio-group?external=react,react-dom'
+
+        const h = React.createElement
+
+        function App() {
+            React.useEffect(() => { window.__ready = true }, [])
+            return h('div', null,
+                h('div', { className: 'row' },
+                    h(Checkbox.Root, { id: 'terms', className: 'ctl-terms' }, h(Checkbox.Indicator, null)),
+                    h('label', { htmlFor: 'terms' }, 'Accept terms')),
+                h('div', { className: 'row' },
+                    h(Switch.Root, { id: 'airplane', className: 'ctl-airplane' }, h(Switch.Thumb, null)),
+                    h('label', { htmlFor: 'airplane' }, 'Airplane mode')),
+                h(RadioGroup, { defaultValue: 'default', 'aria-label': 'Density' },
+                    h('div', { className: 'row' },
+                        h(Radio.Root, { value: 'default', id: 'r-default', className: 'ctl-default' }, h(Radio.Indicator, null)),
+                        h('label', { htmlFor: 'r-default' }, 'Default')),
+                    h('div', { className: 'row' },
+                        h(Radio.Root, { value: 'comfortable', id: 'r-comfortable', className: 'ctl-comfortable' }, h(Radio.Indicator, null)),
+                        h('label', { htmlFor: 'r-comfortable' }, 'Comfortable'))))
+        }
+
+        createRoot(document.getElementById('root')).render(h(App))
+    </script>
+</body>
+</html>
diff --git a/test/data/app/view/form/checkable/collision.php b/test/data/app/view/form/checkable/collision.php
new file mode 100644
index 000000000..eaeffbb45
--- /dev/null
+++ b/test/data/app/view/form/checkable/collision.php
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Checkable name collision</title>
+</head>
+<body>
+    <h2>Accept terms</h2>
+    <form action="/form/complex" method="POST">
+        <label for="terms-box">Accept terms</label>
+        <input type="checkbox" id="terms-box" name="terms" value="agree" />
+        <input type="submit" value="Submit" />
+    </form>
+</body>
+</html>
diff --git a/test/data/app/view/form/checkable/radix.php b/test/data/app/view/form/checkable/radix.php
new file mode 100644
index 000000000..357948e12
--- /dev/null
+++ b/test/data/app/view/form/checkable/radix.php
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Radix Checkables</title>
+    <style>
+        body { font-family: Arial, sans-serif; }
+        .row { margin: 12px 0; display: flex; align-items: center; gap: 8px; }
+        label { font-weight: bold; }
+        button[role="checkbox"], button[role="radio"] { width: 20px; height: 20px; border: 1px solid #666; background: #fff; border-radius: 3px; }
+        button[role="checkbox"][data-state="checked"], button[role="radio"][data-state="checked"] { background: #2a6; }
+        button[role="switch"] { width: 42px; height: 22px; border: 1px solid #666; background: #ddd; border-radius: 11px; }
+        button[role="switch"][data-state="checked"] { background: #2a6; }
+    </style>
+    <script type="importmap">
+    {"imports": {
+      "react": "https://esm.sh/react@19.2.0",
+      "react/jsx-runtime": "https://esm.sh/react@19.2.0/jsx-runtime",
+      "react-dom": "https://esm.sh/react-dom@19.2.0",
+      "react-dom/client": "https://esm.sh/react-dom@19.2.0/client"
+    }}
+    </script>
+</head>
+<body>
+    <h1>Radix Checkables</h1>
+    <div id="root"></div>
+    <script type="module">
+        import * as React from 'react'
+        import { createRoot } from 'react-dom/client'
+        import { Checkbox, Switch, RadioGroup } from 'https://esm.sh/radix-ui@1.6.7?external=react,react-dom'
+
+        const h = React.createElement
+
+        function App() {
+            React.useEffect(() => { window.__ready = true }, [])
+            return h('div', null,
+                h('div', { className: 'row' },
+                    h(Checkbox.Root, { id: 'terms', className: 'ctl-terms' }, h(Checkbox.Indicator, null)),
+                    h('label', { htmlFor: 'terms' }, 'Accept terms')),
+                h('div', { className: 'row' },
+                    h(Switch.Root, { id: 'airplane', className: 'ctl-airplane' }, h(Switch.Thumb, null)),
+                    h('label', { htmlFor: 'airplane' }, 'Airplane mode')),
+                h(RadioGroup.Root, { defaultValue: 'default', 'aria-label': 'Density' },
+                    h('div', { className: 'row' },
+                        h(RadioGroup.Item, { value: 'default', id: 'r-default', className: 'ctl-default' }, h(RadioGroup.Indicator, null)),
+                        h('label', { htmlFor: 'r-default' }, 'Default')),
+                    h('div', { className: 'row' },
+                        h(RadioGroup.Item, { value: 'comfortable', id: 'r-comfortable', className: 'ctl-comfortable' }, h(RadioGroup.Indicator, null)),
+                        h('label', { htmlFor: 'r-comfortable' }, 'Comfortable'))))
+        }
+
+        createRoot(document.getElementById('root')).render(h(App))
+    </script>
+</body>
+</html>
diff --git a/test/data/app/view/form/menu/baseui.php b/test/data/app/view/form/menu/baseui.php
new file mode 100644
index 000000000..468b6935e
--- /dev/null
+++ b/test/data/app/view/form/menu/baseui.php
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Base UI Menu</title>
+    <style>
+        body { font-family: Arial, sans-serif; }
+        .row { margin: 12px 0; }
+        .menu-content { background: #fff; border: 1px solid #666; padding: 4px; min-width: 200px; }
+        .menu-content [role^="menuitem"] { padding: 4px 8px; cursor: pointer; }
+        .menu-content [role^="menuitem"][aria-checked="true"] { background: #2a6; color: #fff; }
+    </style>
+    <script type="importmap">
+    {"imports": {
+      "react": "https://esm.sh/react@19.2.0",
+      "react/jsx-runtime": "https://esm.sh/react@19.2.0/jsx-runtime",
+      "react-dom": "https://esm.sh/react-dom@19.2.0",
+      "react-dom/client": "https://esm.sh/react-dom@19.2.0/client"
+    }}
+    </script>
+</head>
+<body>
+    <h1>Base UI Menu</h1>
+    <div id="root"></div>
+    <script type="module">
+        import * as React from 'react'
+        import { createRoot } from 'react-dom/client'
+        import { Menu } from 'https://esm.sh/@base-ui/react@1.8.0/menu?external=react,react-dom'
+
+        const h = React.createElement
+
+        function App() {
+            const [statusBar, setStatusBar] = React.useState(false)
+            const [activity, setActivity] = React.useState(false)
+            const [person, setPerson] = React.useState('pedro')
+            React.useEffect(() => { window.__ready = true }, [])
+            return h(Menu.Root, null,
+                h(Menu.Trigger, { className: 'row' }, 'Open menu'),
+                h(Menu.Portal, null,
+                    h(Menu.Positioner, null,
+                        h(Menu.Popup, { className: 'menu-content' },
+                            h(Menu.CheckboxItem, { className: 'ctl-status-bar', checked: statusBar, onCheckedChange: setStatusBar }, 'Show status bar'),
+                            h(Menu.CheckboxItem, { className: 'ctl-activity-bar', checked: activity, onCheckedChange: setActivity }, 'Show activity bar'),
+                            h(Menu.RadioGroup, { value: person, onValueChange: setPerson },
+                                h(Menu.RadioItem, { value: 'pedro', className: 'ctl-pedro' }, 'Pedro Duarte'),
+                                h(Menu.RadioItem, { value: 'colm', className: 'ctl-colm' }, 'Colm Tuite'))))))
+        }
+
+        createRoot(document.getElementById('root')).render(h(App))
+    </script>
+</body>
+</html>
diff --git a/test/data/app/view/form/menu/radix.php b/test/data/app/view/form/menu/radix.php
new file mode 100644
index 000000000..d227cbc53
--- /dev/null
+++ b/test/data/app/view/form/menu/radix.php
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Radix Menu</title>
+    <style>
+        body { font-family: Arial, sans-serif; }
+        .row { margin: 12px 0; }
+        .menu-content { background: #fff; border: 1px solid #666; padding: 4px; min-width: 200px; }
+        .menu-content [role^="menuitem"] { padding: 4px 8px; cursor: pointer; }
+        .menu-content [role^="menuitem"][aria-checked="true"] { background: #2a6; color: #fff; }
+    </style>
+    <script type="importmap">
+    {"imports": {
+      "react": "https://esm.sh/react@19.2.0",
+      "react/jsx-runtime": "https://esm.sh/react@19.2.0/jsx-runtime",
+      "react-dom": "https://esm.sh/react-dom@19.2.0",
+      "react-dom/client": "https://esm.sh/react-dom@19.2.0/client"
+    }}
+    </script>
+</head>
+<body>
+    <h1>Radix Menu</h1>
+    <div id="root"></div>
+    <script type="module">
+        import * as React from 'react'
+        import { createRoot } from 'react-dom/client'
+        import { DropdownMenu } from 'https://esm.sh/radix-ui@1.6.7?external=react,react-dom'
+
+        const h = React.createElement
+
+        function App() {
+            const [statusBar, setStatusBar] = React.useState(false)
+            const [activity, setActivity] = React.useState(false)
+            const [person, setPerson] = React.useState('pedro')
+            React.useEffect(() => { window.__ready = true }, [])
+            return h(DropdownMenu.Root, null,
+                h(DropdownMenu.Trigger, { className: 'row' }, 'Open menu'),
+                h(DropdownMenu.Portal, null,
+                    h(DropdownMenu.Content, { className: 'menu-content' },
+                        h(DropdownMenu.CheckboxItem, { className: 'ctl-status-bar', checked: statusBar, onCheckedChange: setStatusBar }, 'Show status bar'),
+                        h(DropdownMenu.CheckboxItem, { className: 'ctl-activity-bar', checked: activity, onCheckedChange: setActivity }, 'Show activity bar'),
+                        h(DropdownMenu.RadioGroup, { value: person, onValueChange: setPerson },
+                            h(DropdownMenu.RadioItem, { value: 'pedro', className: 'ctl-pedro' }, 'Pedro Duarte'),
+                            h(DropdownMenu.RadioItem, { value: 'colm', className: 'ctl-colm' }, 'Colm Tuite')))))
+        }
+
+        createRoot(document.getElementById('root')).render(h(App))
+    </script>
+</body>
+</html>
diff --git a/test/data/app/view/form/toggle/baseui.php b/test/data/app/view/form/toggle/baseui.php
new file mode 100644
index 000000000..6c47c8256
--- /dev/null
+++ b/test/data/app/view/form/toggle/baseui.php
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Base UI Toggles</title>
+    <style>
+        body { font-family: Arial, sans-serif; }
+        .row { margin: 12px 0; display: flex; align-items: center; gap: 8px; }
+        button { min-width: 90px; height: 28px; border: 1px solid #666; background: #fff; }
+        button[aria-pressed="true"] { background: #2a6; color: #fff; }
+    </style>
+    <script type="importmap">
+    {"imports": {
+      "react": "https://esm.sh/react@19.2.0",
+      "react/jsx-runtime": "https://esm.sh/react@19.2.0/jsx-runtime",
+      "react-dom": "https://esm.sh/react-dom@19.2.0",
+      "react-dom/client": "https://esm.sh/react-dom@19.2.0/client"
+    }}
+    </script>
+</head>
+<body>
+    <h1>Base UI Toggles</h1>
+    <div id="root"></div>
+    <script type="module">
+        import * as React from 'react'
+        import { createRoot } from 'react-dom/client'
+        import { Toggle } from 'https://esm.sh/@base-ui/react@1.8.0/toggle?external=react,react-dom'
+        import { ToggleGroup } from 'https://esm.sh/@base-ui/react@1.8.0/toggle-group?external=react,react-dom'
+
+        const h = React.createElement
+
+        function App() {
+            React.useEffect(() => { window.__ready = true }, [])
+            return h('div', null,
+                h('div', { className: 'row' },
+                    h(Toggle, { className: 'ctl-bold' }, 'Bold')),
+                h(ToggleGroup, { toggleMultiple: true, className: 'row', 'aria-label': 'Text formatting' },
+                    h(Toggle, { value: 'italic', className: 'ctl-italic' }, 'Italic'),
+                    h(Toggle, { value: 'underline', className: 'ctl-underline' }, 'Underline')))
+        }
+
+        createRoot(document.getElementById('root')).render(h(App))
+    </script>
+</body>
+</html>
diff --git a/test/data/app/view/form/toggle/radix.php b/test/data/app/view/form/toggle/radix.php
new file mode 100644
index 000000000..b956d0a46
--- /dev/null
+++ b/test/data/app/view/form/toggle/radix.php
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Radix Toggles</title>
+    <style>
+        body { font-family: Arial, sans-serif; }
+        .row { margin: 12px 0; display: flex; align-items: center; gap: 8px; }
+        button { min-width: 90px; height: 28px; border: 1px solid #666; background: #fff; }
+        button[aria-pressed="true"] { background: #2a6; color: #fff; }
+    </style>
+    <script type="importmap">
+    {"imports": {
+      "react": "https://esm.sh/react@19.2.0",
+      "react/jsx-runtime": "https://esm.sh/react@19.2.0/jsx-runtime",
+      "react-dom": "https://esm.sh/react-dom@19.2.0",
+      "react-dom/client": "https://esm.sh/react-dom@19.2.0/client"
+    }}
+    </script>
+</head>
+<body>
+    <h1>Radix Toggles</h1>
+    <div id="root"></div>
+    <script type="module">
+        import * as React from 'react'
+        import { createRoot } from 'react-dom/client'
+        import { Toggle, ToggleGroup } from 'https://esm.sh/radix-ui@1.6.7?external=react,react-dom'
+
+        const h = React.createElement
+
+        function App() {
+            React.useEffect(() => { window.__ready = true }, [])
+            return h('div', null,
+                h('div', { className: 'row' },
+                    h(Toggle.Root, { className: 'ctl-bold' }, 'Bold')),
+                h(ToggleGroup.Root, { type: 'multiple', className: 'row', 'aria-label': 'Text formatting' },
+                    h(ToggleGroup.Item, { value: 'italic', className: 'ctl-italic' }, 'Italic'),
+                    h(ToggleGroup.Item, { value: 'underline', className: 'ctl-underline' }, 'Underline')))
+        }
+
+        createRoot(document.getElementById('root')).render(h(App))
+    </script>
+</body>
+</html>
diff --git a/test/helper/Playwright_test.js b/test/helper/Playwright_test.js
index 0355dde0c..20b181cd3 100644
--- a/test/helper/Playwright_test.js
+++ b/test/helper/Playwright_test.js
@@ -134,7 +134,9 @@ describe('Playwright', function () {
       await I.click('Hello World')
     })
   })
-  describe('#grabCheckedElementStatus', () => {
+  describe('#grabCheckedElementStatus', function () {
+    this.timeout(60000)
+
     it('check grabCheckedElementStatus', async () => {
       await I.amOnPage('/invisible_elements')
       let result = await I.grabCheckedElementStatus({ id: 'html' })
@@ -148,9 +150,37 @@ describe('Playwright', function () {
       try {
         await I.grabCheckedElementStatus({ id: 'basic' })
       } catch (e) {
-        assert.equal(e.message, 'Element is not a checkbox or radio input')
+        assert.equal(e.message, 'Element is not a checkbox or radio input and has no aria-checked or aria-pressed state (role: none)')
       }
     })
+
+    it('reads aria-checked of a role=checkbox', async () => {
+      await I.amOnPage('/form/checkable/radix')
+      await I.waitForFunction(() => window.__ready === true, [], 30)
+
+      assert.equal(await I.grabCheckedElementStatus('.ctl-terms'), false)
+      await I.checkOption('Accept terms')
+      assert.equal(await I.grabCheckedElementStatus('.ctl-terms'), true)
+    })
+
+    it('reads aria-checked of a menu item', async () => {
+      await I.amOnPage('/form/menu/radix')
+      await I.waitForFunction(() => window.__ready === true, [], 30)
+      await I.click('Open menu')
+      await I.waitForElement('[role=menu]', 5)
+
+      assert.equal(await I.grabCheckedElementStatus('.ctl-status-bar'), false)
+      assert.equal(await I.grabCheckedElementStatus('.ctl-pedro'), true)
+    })
+
+    it('reads aria-pressed of a toggle button', async () => {
+      await I.amOnPage('/form/toggle/radix')
+      await I.waitForFunction(() => window.__ready === true, [], 30)
+
+      assert.equal(await I.grabCheckedElementStatus('.ctl-bold'), false)
+      await I.toggleButton('Bold')
+      assert.equal(await I.grabCheckedElementStatus('.ctl-bold'), true)
+    })
   })
   describe('#grabDisabledElementStatus', () => {
     it('check isElementDisabled', async () => {
diff --git a/test/helper/webapi.js b/test/helper/webapi.js
index 40b51c3c3..51441fb78 100644
--- a/test/helper/webapi.js
+++ b/test/helper/webapi.js
@@ -514,6 +514,202 @@ export function tests() {
     })
   })
 
+  describe('#checkOption - ARIA roles', function () {
+    this.timeout(60000)
+
+    async function open(page) {
+      await I.amOnPage(`/form/checkable/${page}`)
+      await I.waitForFunction(() => window.__ready === true, [], 30)
+    }
+
+    async function ariaChecked(css) {
+      return I.grabAttributeFrom(css, 'aria-checked')
+    }
+
+    for (const page of ['radix', 'baseui']) {
+      describe(page, () => {
+        beforeEach(function () {
+          // webdriverio resolves `<label for>` to input/textarea only, and a Radix
+          // `<button role=checkbox>` carries no accessible name of its own
+          if (page === 'radix' && isHelper('WebDriver')) this.skip()
+        })
+
+        it('checks and unchecks a checkbox by its label', async () => {
+          await open(page)
+          await I.dontSeeCheckboxIsChecked('Accept terms')
+
+          await I.checkOption('Accept terms')
+          expect(await ariaChecked('.ctl-terms')).to.equal('true')
+          await I.seeCheckboxIsChecked('Accept terms')
+
+          await I.uncheckOption('Accept terms')
+          expect(await ariaChecked('.ctl-terms')).to.equal('false')
+          await I.dontSeeCheckboxIsChecked('Accept terms')
+        })
+
+        it('checks a switch by its label', async () => {
+          await open(page)
+          await I.checkOption('Airplane mode')
+          expect(await ariaChecked('.ctl-airplane')).to.equal('true')
+          await I.seeCheckboxIsChecked('Airplane mode')
+        })
+
+        it('checks a radio by its label', async () => {
+          await open(page)
+          await I.dontSeeCheckboxIsChecked('Comfortable')
+
+          await I.checkOption('Comfortable')
+          expect(await ariaChecked('.ctl-comfortable')).to.equal('true')
+          expect(await ariaChecked('.ctl-default')).to.equal('false')
+          await I.seeCheckboxIsChecked('Comfortable')
+        })
+      })
+    }
+
+    it('resolves the visible control and not the hidden input the label points at', async () => {
+      await open('baseui')
+      // the author id sits on a 1x1 aria-hidden mirror input at x:-1,y:-1 which <label for> targets;
+      // [role=checkbox] can only be the visible span
+      expect(await I.grabAttributeFrom('#terms', 'aria-hidden')).to.equal('true')
+
+      await I.checkOption('Accept terms')
+      expect(await ariaChecked('[role=checkbox]')).to.equal('true')
+    })
+
+    it('still checks a plain input by its label', async () => {
+      await I.amOnPage('/form/checkbox')
+      await I.checkOption('I Agree')
+      await I.seeCheckboxIsChecked('I Agree')
+      await I.click('Submit')
+      assert.equal(formContents('terms'), 'agree')
+    })
+
+    it('ignores a non-control sharing the accessible name', async () => {
+      await I.amOnPage('/form/checkable/collision')
+      await I.dontSeeCheckboxIsChecked('#terms-box')
+
+      await I.checkOption('Accept terms')
+      await I.seeCheckboxIsChecked('#terms-box')
+    })
+  })
+
+  describe('#checkOption - menu items', function () {
+    this.timeout(60000)
+
+    async function openMenu() {
+      if (await I.grabNumberOfVisibleElements('[role=menu]')) return
+      await I.click('Open menu')
+      await I.waitForElement('[role=menu]', 5)
+    }
+
+    async function open(page) {
+      await I.amOnPage(`/form/menu/${page}`)
+      await I.waitForFunction(() => window.__ready === true, [], 30)
+      await openMenu()
+    }
+
+    async function ariaChecked(css) {
+      await openMenu()
+      return I.grabAttributeFrom(css, 'aria-checked')
+    }
+
+    for (const page of ['radix', 'baseui']) {
+      describe(page, () => {
+        it('checks a menu checkbox item by its label', async () => {
+          await open(page)
+          await I.dontSeeCheckboxIsChecked('Show status bar')
+
+          await I.checkOption('Show status bar')
+          expect(await ariaChecked('.ctl-status-bar')).to.equal('true')
+          expect(await ariaChecked('.ctl-activity-bar')).to.equal('false')
+          await I.seeCheckboxIsChecked('Show status bar')
+        })
+
+        it('leaves an already checked menu item checked', async () => {
+          await open(page)
+          await I.checkOption('Show status bar')
+
+          await openMenu()
+          await I.checkOption('Show status bar')
+          expect(await ariaChecked('.ctl-status-bar')).to.equal('true')
+          await I.seeCheckboxIsChecked('Show status bar')
+        })
+
+        it('unchecks a menu checkbox item by its label', async () => {
+          await open(page)
+          await I.checkOption('Show status bar')
+
+          await openMenu()
+          await I.uncheckOption('Show status bar')
+          expect(await ariaChecked('.ctl-status-bar')).to.equal('false')
+          await I.dontSeeCheckboxIsChecked('Show status bar')
+        })
+
+        it('checks a menu radio item and unchecks its siblings', async () => {
+          await open(page)
+          await I.seeCheckboxIsChecked('Pedro Duarte')
+
+          await I.checkOption('Colm Tuite')
+          expect(await ariaChecked('.ctl-colm')).to.equal('true')
+          expect(await ariaChecked('.ctl-pedro')).to.equal('false')
+          await I.seeCheckboxIsChecked('Colm Tuite')
+          await I.dontSeeCheckboxIsChecked('Pedro Duarte')
+        })
+      })
+    }
+  })
+
+  describe('#toggleButton', function () {
+    this.timeout(60000)
+
+    async function open(page) {
+      await I.amOnPage(`/form/toggle/${page}`)
+      await I.waitForFunction(() => window.__ready === true, [], 30)
+    }
+
+    async function ariaPressed(css) {
+      return I.grabAttributeFrom(css, 'aria-pressed')
+    }
+
+    for (const page of ['radix', 'baseui']) {
+      describe(page, () => {
+        it('presses and unpresses a toggle button', async () => {
+          await open(page)
+          await I.dontSeeButtonIsPressed('Bold')
+
+          await I.toggleButton('Bold')
+          expect(await ariaPressed('.ctl-bold')).to.equal('true')
+          await I.seeButtonIsPressed('Bold')
+
+          await I.toggleButton('Bold')
+          expect(await ariaPressed('.ctl-bold')).to.equal('false')
+          await I.dontSeeButtonIsPressed('Bold')
+        })
+
+        it('presses a single item of a toggle group', async () => {
+          await open(page)
+          await I.toggleButton('Italic')
+
+          expect(await ariaPressed('.ctl-italic')).to.equal('true')
+          expect(await ariaPressed('.ctl-underline')).to.equal('false')
+          await I.seeButtonIsPressed('Italic')
+          await I.dontSeeButtonIsPressed('Underline')
+        })
+      })
+    }
+
+    it('refuses an element that is not a toggle button', async () => {
+      await I.amOnPage('/form/checkbox')
+
+      try {
+        await I.toggleButton('Submit')
+        throw Error('Should not get this far')
+      } catch (err) {
+        expect(err.message).to.include('not a toggle button')
+      }
+    })
+  })
+
   describe('#selectOption', () => {
     it('should select option by css', async () => {
       await I.amOnPage('/form/select')
@@ -2341,8 +2537,6 @@ export function tests() {
     })
 
     it('should check options by aria-label', async () => {
-      if (!isHelper('WebDriver')) return
-
       await I.amOnPage('/form/role_elements')
 
       await I.dontSeeCheckboxIsChecked('I agree to the terms and conditions')
@@ -2363,9 +2557,7 @@ export function tests() {
       await I.fillField('your@email.com', 'bob@company.com')
       await I.fillField('Enter your message', 'Test message')
 
-      if (isHelper('WebDriver')) {
-        await I.checkOption('Subscribe to newsletter')
-      }
+      await I.checkOption('Subscribe to newsletter')
 
       await I.click('Submit')
       await I.see('Form Submitted!')