Reactive CSSexamples
Documents v0.9.0 · previews run the real runtime · experimental features are marked exp

Pricing toggle

A billing switch changes the price and shows the annual saving, with role="switch" kept in sync.

state()toggle()--attr-*when()contentexperimental
Live previewreal runtime
View sourceOpen in Playground ↗

Click the switch, or focus it and press Space.

How it works

  • state()line 2Makes each matching element the owner of an independent state with an initial value.
  • toggle()line 4Flips a boolean state. In an :on() rule it is the mutation --open: toggle().
  • --attr-*line 7--attr-<name>: <value> writes one allowlisted HTML attribute of the matched element from a reactive value: ARIA states such as aria-expanded, aria-checked or aria-disabled, disabled, hidden, tabindex or data-*. The only custom-property namespace with DOM semantics.
  • when()line 9Picks one of two values from a condition. Boolean conditions compile to native if() where supported.
  • contentline 9On elements, a content value that reads state also becomes the element’s DOM text: a real text node, never HTML. The native declaration is kept as written.

A switch with the right semantics. The button has role="switch", and --attr-aria-checked keeps its aria-checked equal to the state, so assistive technology announces “on” and “off”. The price is DOM text picked with when().

Native CSS alternative

A checkbox styled as a switch: :checked ~ .price can show the other price if both are in the HTML. Reactive CSS keeps one price element and the ARIA state in sync.

Limitations

  • The track’s knob is drawn in base styles; only its color reads the state here.

Implementation

2 files · 10 lines
style.cssreactive
/* ---- Reactive CSS -------------------------------------------------------------------------- */.billing { --annual: state(false); }.billing .switch:on(click) { --annual: toggle(); }/* role="switch" needs aria-checked: written from the state. */.billing .switch { --attr-aria-checked: var(--annual); }.billing .price { content: when(--annual, "$96 / year", "$10 / month"); }.billing:when(--annual) .saving { display: inline; }
state()Function · hover any red tokenMakes each matching element the owner of an independent state with an initial value.Reference →

Source: site/src/catalog/interfaces/pricing-toggle/. style.css from its Reactive CSS divider; the layout above it and the shared api.css run but are not shown.

Next recommendedTabs →Tabs selected by click or arrow keys, with the ARIA tab pattern written from one state.← All examples
Related

Accordion

Each item opens and closes on its own, and its button reports the state with aria-expanded.

experimentalstate()toggle()--attr-*when()

Dropdown menu

A menu that opens on click and closes on Escape, on a choice or on a click anywhere else.

experimentalstate()outside():on()attr()--attr-*focus:

Theme switcher

One keyword state cycles through three themes, and the page colors and the button label follow it.

experimentalstate()cycle():when()content