v132 · css

Conditional Form

A checkout form where sections activate and deactivate based on radio choices. interactivity: inert combined with :has() makes sections non-interactive — no Tab, no click, no keyboard — when their toggle radio is off. No JavaScript disabled attribute management, no field looping.

Feature detection: checking…
Checkout form — radio buttons toggle section interactivity via CSS only
Billing Address
Shipping Address
Shipping Details inert
Gift Options
Gift Message inert
Focus log — Tab through the form and inert sections will be skipped
Focus any form field then Tab through…

Pre-132 vs Chrome 132+

Pre-Chrome 132
To deactivate a form section on a radio change, developers had to loop over every <input>, <select>, and <textarea> in the section and set disabled = true. Then reverse it when the section reactivated. Easy to miss a field or break on dynamic content.
Chrome 132+
Two CSS rules: :has(#same-as-billing:checked) .shipping-section { interactivity: inert; } and :has(#different-address:checked) .shipping-section { interactivity: auto; }. The browser handles blocking all interaction — clicks, keyboard, Tab — on the entire section tree, regardless of what's inside it.
/* CSS-driven conditional form sections — no JS disabled management */

/* When "same as billing" is checked, shipping fields become inert */
.checkout-form:has(#same-as-billing:checked) .shipping-section {
  interactivity: inert;
  opacity: 0.4;
}

/* When "different address" is checked, section becomes active */
.checkout-form:has(#different-address:checked) .shipping-section {
  interactivity: auto;
  opacity: 1;
}

/*
  interactivity: inert blocks ALL interaction on the section:
  - Tab skips all focusable elements inside
  - Click events are silently swallowed
  - Screen readers treat the content as inert
  — applies recursively to every descendant
  — no JS loop over inputs needed
*/

see also