Annual Billing Toggle
A monthly or annual toggle with a seat slider, both yearly totals side by side and the annual saving printed.
A monthly or annual toggle with a seat slider, both yearly totals side by side and the annual saving printed.
Search blocks by description or jump to a page.
The source for every Marketing block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Annual Billing Toggle prices the discount instead of just claiming it. A monthly or annual segmented toggle sits above a seat slider, and two yearly totals show side by side with the active period highlighted. The saving line underneath says what annual keeps in the budget, about 21% off the monthly rate, with a pro rata refund note so the commitment reads as low risk.
A client component on the ui Slider with plain useState, the monthly and annual per seat rates are the two constants at the top of the file. Change them to your own numbers and the totals, the saving, and the percentage all follow, no other edits needed.
Reach for this block on a pricing page where the annual discount is real and you want the visitor to feel it at their own seat count. A toggle that only flips a headline price gets ignored, this one drags the seats and prints the yearly gap, which is the number a buyer actually takes to their manager.
A natural flow around it on a Marketing Pro page:
Before
After
One strong use is the monthly versus annual gap at a live seat count. Other framings:
Tip: keep the seat default near your median deal, a toggle that opens on one seat makes the annual saving look trivial.