Skip to content
tileio

Menu

9 layers · 5 free

Pricing toggles: monthly, yearly, currency and more

The monthly/yearly switch is the most common control on a pricing page and often the weakest: prices jump, the saving is buried, keyboard users can't reach it. Toggle Pricing handles that classic case. The rest of the set switches the other things buyers want to compare: how they pay, which currency, which rows differ.

If you already have pricing cards and only need the switch, the last layer is the switch on its own: a segmented control built on a radio group, so arrow keys and form submission work without script.

The 9 layers, in order

  1. Monthly | Yearly with a 'save 20 %' tag; every price rolls digit by digit when the period changes and the featured plan lifts.

  2. One card that flips in 3D between yearly and lifetime, with a break-even bar showing the year lifetime pays for itself.

  3. A flag switcher that flips each price like a departures board, rounded to friendly local prices, with the FX rate shown.

  4. Region guessed from the time zone and switchable; a receipt shows the working from base price to the local figure.

  5. A 'differences only' switch that folds every row where all plans agree, and a needs sentence that marks the cheapest match.

  6. Not plans but models, the same pattern: header buttons set the one to compare against and every cell states the difference in words.

  7. Pin buttons on each plan and feature tile keep a highlight on, so the plan/feature cross-highlight works on touch as well as hover.

  8. A switch on every add-on row; turning one on flies its chip onto the plan card and re-totals the price.

  9. The switch by itself: a three-way segmented control on a radio group whose thumb slides with a small squash. Use it for Monthly / Yearly / Lifetime.

Browse the full catalogue: Sections · Pages · Elements

Related collections

All collections