Duo Pricing Toggle

Duo Pricing Toggle is a monthly / yearly billing switch with a price that cross-fades between the two amounts and an optional savings badge.

What you can set

- Labels, both prices, currency sign, both period units and the badge are plain text fields, so each can be connected to a CMS field.

- Colors for accent, track, text and muted text; any color format works, including rgba.

- Font family.

- Switch name: what screen readers call the switch (on means yearly billing).

- Deep link (off by default): when on, ?billing=yearly or ?billing=monthly in the page URL picks the starting state and toggling updates the URL without adding history entries. When off, the URL is never read or changed.

Accessibility

- The control is a real switch (role="switch" with aria-checked). Tab reaches it, Space or Enter flips it, and a visible focus ring in your accent color appears for keyboard focus.

- The current price is announced politely to screen readers after each change.

- With reduced motion turned on in the system, the knob, price and colors change instantly with no animation.

Layout

- Fits a 390px phone width without horizontal scrolling at the default text.

- On the Framer canvas it shows the monthly state as a static preview.