Open experiment
Liquid price switcher
A pricing module built around a two-option pressed-button control. Its fluid active layer moves with the billing mode while related price and savings content update in one announced transaction.
Lab tested Responsive Dark mode Interactive
- Version
- 1.0.0
- Updated
- 2026-08-02
- Dependencies
- Zero
<article class="cmp-liquid-price">
<header><span>Creator plan</span><b>Most popular</b></header>
<div class="cmp-liquid-price__switch" data-mode="annual" role="group" aria-label="Billing period">
<i aria-hidden="true"></i
><button type="button" data-mode="monthly" aria-pressed="false">Monthly</button
><button type="button" data-mode="annual" aria-pressed="true">Annual</button>
</div>
<div class="cmp-liquid-price__value" aria-live="polite">
<strong>$24</strong><span>/ month<br /><b>Billed $288 annually · save $72</b></span>
</div>
<ul>
<li>Unlimited projects</li>
<li>Realtime collaboration</li>
<li>Version history</li>
</ul>
<button class="cmp-liquid-price__cta" type="button">
Start creating <span aria-hidden="true">↗</span>
</button>
</article>
No runtime reactions detected Open in Editor
Validated in the lab
Experiment report
- Schema and source files passed
- Responsive test passed
- Keyboard test passed
- No console errors
Component ingredients
- Dependencies
- None
- Browser support
- Current Chrome, Current Edge, Current Firefox, Current Safari
- Version
- 1.0.0
- Last tested
- 2026-08-02
Accessibility notes
- Billing options are native buttons with synchronized pressed state.
- Price, cadence, and savings updates are announced politely.
- Reduced-motion preferences remove selector movement.
License: MIT License for open-source use, modification, and distribution.