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

Task list

Native checkboxes whose label fades when done, with a short animation when a task is checked or unchecked.

state()event():just-checkedwhen()
Live previewreal runtime
View sourceOpen in Playground ↗

Check and uncheck the tasks with the mouse or with Space.

How it works

  • state()line 3Makes each matching element the owner of an independent state with an initial value.
  • event()line 5Inside a mutation of an :on() rule: one field of the current event, such as event(local-x), event(key) or event(value), read once as a typed value.
  • :just-checkedline 10Matches a checkbox or radio after an observed unchecked → checked change, until its next change.
  • when()line 7Picks one of two values from a condition. Boolean conditions compile to native if() where supported.

Native checkboxes with a reaction CSS cannot write: an animation that plays only when the user checks or unchecks a task, not when the page loads already checked.

Native CSS alternative

:checked + span { opacity: 0.5 } gives the fade without a script. The one-time animation on the change is what native CSS cannot express: :checked also matches a box that was checked on load.

Limitations

  • With reduced motion, the animations do not play; the fade stays.

Implementation

2 files · 11 lines
style.cssreactive
/* ---- Reactive CSS -------------------------------------------------------------------------- *//* The text next to the checkbox reads the state, so it lives on the label around both. */.tasks .task { --done: state(false); }.tasks .task input:on(change) { --done: set(event(checked)); }.tasks .task span { opacity: when(--done, 0.5, 1); }/* :just-checked matches for one animation after a real check. */.tasks input:just-checked + span { animation: tasks-pop 300ms; }.tasks input:just-unchecked + span { animation: tasks-settle 300ms; }
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/task-list/. style.css from its Reactive CSS divider; the layout above it and the shared api.css run but are not shown.

Next recommendedPricing toggle →A billing switch changes the price and shows the annual saving, with role="switch" kept in sync.← All examples
Related

Tabs

Tabs selected by click or arrow keys, with the ARIA tab pattern written from one state.

experimentalstate():on()cycle():nth-var()--attr-*focus:

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: