CSS toggles are a mechanism for associating toggleable state with a DOM element. This state can be defined and connected to activations through CSS properties, and can be queried in CSS selectors. This provides a declarative mechanism for specifying state that describes behaviors like the existing HTML behaviors for checkboxes or radio buttons.

Motivation

There are many cases where a user interaction (such as a click) toggles state that styles depend on. These cases include popups, tabs, carousels, accordions, and toggles controlling light/dark mode. Building these today requires Javascript. We would like to build a declarative way of doing this that, if we do it right, will be easier for developers to use, faster, and more accessible than the solutions that are used today.

Specification

Specification link


Proposal in a personal repository, no adoption from community

Status in Chromium

Blink>DOM


No active development (tracking bug)

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

  • No signal
  • No signal
  • No signals

Owners

Intent to Prototype url

Intent to Prototype thread

Last updated on 2022-04-15