Billing Period Toggle
Billing period switcher with monthly and yearly cards showing effective monthly price, a savings badge on yearly, and the selected state highlighted.
Billing period switcher with monthly and yearly cards showing effective monthly price, a savings badge on yearly, and the selected state highlighted.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
Already purchased? Log in
Billing Period Toggle is the period switcher, two side-by-side cards for Monthly at $24 per seat and Yearly at $20 per seat with a 2 months free badge. Yearly is selected: it carries a ring and a filled radio dot, and its note reads Billed $240 per seat per year. Saves $48 per seat. The footer adds the honest detail that switching mid-cycle credits unused days to the next invoice.
Periods are one typed array with badge as string or undefined on every entry so the type is uniform. The block is static; add useState and toggle the selected field to make it interactive.
Reach for this block above any pricing table or plan picker, as the control that determines which price column the table shows. Wire aria-pressed to your selected state and pass the chosen period to the pricing table beneath.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the monthly versus yearly period switcher. Other toggle shapes:
Tip: showing the effective monthly price on both cards makes the saving legible without requiring the user to do arithmetic; $24 versus $20 is clearer than 17% off.