Pricing Toggle
Pro Rive template · Category: Toggles & Switches
A Monthly / Annual pricing switch for any plan card. Tap the switch and the knob slides across, the price rolls smoothly between the two amounts, the note swaps between billed monthly and billed yearly, and a Save badge pops in for annual. Everything is data-bound in the Pricing Toggle view model: both prices, the currency, period, plan name, switch labels, badge text and every color (card, track, knob, text, price, badge). Your app can set Billing directly or listen for the billing changed event. The badge grows with its label and the price sits on one clean baseline. Responsive with Fit.Layout. No scripts.
- pricing
- toggle
- switch
- monthly
- annual
- billing
- plan card
- subscription
- price
- badge
- data binding
- view model
- state machine
- responsive
- no scripts
Interactive .riv file: hover, tap and drag interactions work in web, iOS, Android and Flutter Rive runtimes. Customize colors, text and images before download.
Test in Riv Eye · Pricing