Pricing toggle

1. Copy to Webflow

   Add Geist and Geist Mono to your site's fonts (Site settings, Fonts, Google Fonts) before pasting: Webflow removes any font your site has not installed.
   Copy to Webflow

2. Add custom CSS

   To keep things simple, the code ships inside the Webflow embed. You can also copy it here and add it yourself to the page or site custom code. How to choose

   The look of the preview is the pricing-toggle-* classes: the switch, its knob and the two words inside it, the plates of the plans. What moves is in the Embed. Its accent is the color setting; the ink of the focus ring and the ground a hovered button takes are two variables, --pricing-toggle-ink and --pricing-toggle-ground, to set on the section in a rule of your own. A price is kept on one line and asked for tabular figures, so nothing moves sideways while it turns. The switch is a Link block, because Webflow has no button element: the Embed keeps a click on it in place and lets Space press it.

3. Add custom JS

   To keep things simple, the code ships inside the Webflow embed. You can also copy it here and add it yourself to the page or site custom code. How to choose

4. Tune it

   Custom attributes
   Select the section on the canvas and open the Settings panel. Under Custom attributes, add a pair: the name on the left, the value on the right.

   Custom attribute	What it does
   data-pricing-toggle	Marks the block that holds the switch and the plans: the section of the paste, or any box of your own. It takes no value: leave the value field empty. The settings below go on the same element.
   data-pricing-toggle-switch	On the switch, the element that is pressed and dragged. It takes no value. The engine gives it role="switch" when it has no role, writes aria-checked on it and names it after the word of the yearly side. Without it nothing can be pressed, and the console says so. [ Required ]
   data-pricing-toggle-price	On each price, with its two values beside it: data-pricing-toggle-monthly="$49" and data-pricing-toggle-yearly="$490", written the way they should read, currency and separators included. The price rolls digit by digit. Left without data-pricing-toggle-monthly, the text of the element is the monthly value. The text is also what a page without JavaScript shows. [ Required ]
   data-pricing-toggle-yearly	The yearly value. On a price it sits beside data-pricing-toggle-price. Alone on any other element, a word, a line, it gives that text its yearly version, "per year" for "per month", and the whole text turns as one. Without it on any element of the block, nothing changes with the switch. [ Required ]
   data-pricing-toggle-label	On the visible word of each side, with the value monthly or yearly, inside the switch or beside it. A click on it sets that side, the one not chosen steps back, and the yearly one names the switch for a screen reader. [ Optional ]
   data-pricing-toggle-knob	On the knob inside the switch. It takes no value. Without one the engine adds a span, which then needs a size and a colour of your own. [ Optional ]
   data-pricing-toggle-yearly-href	On a link, with its address on the yearly side as the value, the yearly checkout page of the plan for one. Its href is the monthly one, unless data-pricing-toggle-monthly-href gives another. [ Optional ]
   data-pricing-toggle-show	On what is there on one side only, with the value yearly or monthly: a note, a badge. It keeps its room on the other side, unseen, so nothing jumps. [ Optional ]
   data-pricing-toggle-plan	On the box of a plan. Its heading, or the value of the attribute when it has one, is the name said before the price when the new prices are read to a screen reader. [ Optional ]
   data-pricing-toggle-cta	On the button of a plan: the hover of the preview, the button takes the accent. With the value usual, for the button already in the accent, it takes the ground instead. [ Optional ]
   data-pricing-toggle-period	Written by the engine on the block: monthly or yearly. Never written by hand; a style of your own can read it. [ Optional ]

   Settings
   Every setting is a custom attribute too, added the same way and on the same section. An attribute always wins over the defaults written in the code.

   Attribute	Default	What it is
   data-pricing-toggle-color	#ffab1a	The accent: the colour that fills the track of the switch as the knob reaches the yearly side, and the one a plan's button takes under the pointer. Options: any CSS colour. The engine writes it on the block as --pricing-toggle-color.
   data-pricing-toggle-duration	1.6	Seconds the prices take to cross from one side to the other after a click or a key, leaving slowly and settling slowly. A drag is not timed: the prices stay under the hand.
   data-pricing-toggle-spread	0.72	Share of the travel over which the columns leave one after the other, from 0 to 0.9.
   data-pricing-toggle-start	monthly	The period shown when the page arrives. Options: monthly or yearly. Without JavaScript the page shows the monthly side whatever this says.
   data-pricing-toggle-remember	false	Keeps the period the visitor chose, in the browser's local storage, and shows it on the next visit instead of start. Options: true or false. One choice for the whole site: every table that remembers reads the same one.
   data-pricing-toggle-drag	true	Whether the knob may be dragged. Options: true or false. At false the switch only answers a click and the keyboard, and the prices still follow the knob.
   data-pricing-toggle-announce	true	Says the new prices once to a screen reader after a change, as one sentence: the word of the side, then each plan and its price. Options: true or false. At false the switch still says its state and each price still reads as its current value.

Two files, no build step. It runs in the browser only. Load it with a script tag in plain HTML, in a client-side script in Astro, never in the frontmatter. In React, call PricingToggle.mount(ref.current) in useEffect and destroy() in its cleanup.

1. Tune it, either way

   Per element with an attribute, or once for the whole site by editing DEFAULTS at the top of the file.

   Attribute	Default	What it is	Lower	Higher
   data-pricing-toggle-color	#ffab1a	The accent: the colour that fills the track of the switch as the knob reaches the yearly side, and the one a plan's button takes under the pointer. Options: any CSS colour. The engine writes it on the block as --pricing-toggle-color.
   data-pricing-toggle-duration	1.6	Seconds the prices take to cross from one side to the other after a click or a key, leaving slowly and settling slowly. A drag is not timed: the prices stay under the hand.	A quicker roll; under 0.8 the wave from plan to plan is no longer read	A slower one, more time on each figure; past 2.4 the last plan keeps the visitor waiting
   data-pricing-toggle-spread	0.72	Share of the travel over which the columns leave one after the other, from 0 to 0.9.	The columns turn closer together; at 0 they all turn at once	A longer wave across the table, each column turning faster inside it
   data-pricing-toggle-start	monthly	The period shown when the page arrives. Options: monthly or yearly. Without JavaScript the page shows the monthly side whatever this says.
   data-pricing-toggle-remember	false	Keeps the period the visitor chose, in the browser's local storage, and shows it on the next visit instead of start. Options: true or false. One choice for the whole site: every table that remembers reads the same one.
   data-pricing-toggle-drag	true	Whether the knob may be dragged. Options: true or false. At false the switch only answers a click and the keyboard, and the prices still follow the knob.
   data-pricing-toggle-announce	true	Says the new prices once to a screen reader after a change, as one sentence: the word of the side, then each plan and its price. Options: true or false. At false the switch still says its state and each price still reads as its current value.

2. Drive it from JavaScript

   When the period has to be set from code, a link that says "see yearly prices" for one, when the page reacts to the choice, or when plans arrive after the page has loaded.
   JavaScript Expand Copy

   const element = document.querySelector('[data-pricing-toggle]');
   element.addEventListener('pricing-toggle:change', (e) => {
     console.log(e.detail);
   });
   
   const pricing = PricingToggle.mount(element);   // the block auto() mounted, or a new one
   pricing.set('yearly');          // rolls to the yearly side
   pricing.set('monthly', true);   // at once, nothing rolled
   pricing.toggle();
   
   element.addEventListener('pricing-toggle:change', (event) => {
     console.log(event.detail.period);   // 'monthly' or 'yearly'
   });
   
   // Plans added after the page loaded: destroy, then mount again.
   PricingToggle.auto(container);
   
   // When the table leaves the page:
   pricing.destroy();   // the markup goes back exactly as it was written

   Show all 19 lines

3. Fit it to your page

   Two files and the markup, no build: the stylesheet linked in the head, the script loaded before the end of the body.

   The engine mounts every [data-pricing-toggle] on DOM ready. To make the table yours, change the markup, nothing else:

   • The plans. A plan is any box inside the block. Add one, remove one: the row of the preview shares its width between as many as there are. The engine counts nothing, it only reads the prices it finds.
   • The prices. Write both values the way they should read: data-pricing-toggle-monthly="1 290,00 €" and data-pricing-toggle-yearly="12 900,00 €", £49 and £41, Free and Free. The currency, the spaces, the commas and the points are yours; the engine never formats a number. Put the monthly value in the text of the element too: it is what a page without JavaScript shows.
   • The words. Anything else that changes with the period takes data-pricing-toggle-yearly with its yearly text: "per month" and "per year", "Billed monthly" and "Billed once a year".
   • The links. Give the button of a plan its yearly address in data-pricing-toggle-yearly-href; its href is swapped the moment the side changes, before the prices have finished turning.
   • The switch. A button with role="switch", a knob inside, and the word of each side, inside the switch as in the preview or beside it. A click on a word chooses that side. Its size, colours and shape are your classes: the knob travels whatever room the track leaves it.

   The colours

   The accent is the color setting: data-pricing-toggle-color="#2f6bff" on the block. The two others are custom properties, set in a rule of the page:

   css .my-pricing { --pricing-toggle-ink: #0b0b0c; /* focus ring, text of a hovered button */ --pricing-toggle-ground: #ffffff; /* hover of the button already in the accent */ }

   Keeping the choice

   data-pricing-toggle-remember="true" keeps the chosen period in local storage under the key pricing-toggle and shows it at once on the next visit, with nothing rolled. Every table that remembers shares that one choice.

   From JavaScript

   `js const pricing = PricingToggle.mount(document.querySelector('[data-pricing-toggle]'));

   pricing.set('yearly'); // rolls to the yearly side pricing.set('monthly', true); // at once, nothing rolled pricing.toggle(); pricing.period(); // 'monthly' or 'yearly'

   document.addEventListener('pricing-toggle:change', (event) => { console.log(event.detail.period); // the side just asked for });

   pricing.destroy(); // the markup goes back exactly as it was written `

   PricingToggle.auto(container) mounts what was added after the page loaded, with window.PricingToggleSettings as the page-wide settings.

4. Avoid the pitfalls

   • A face without tabular figures. The stylesheet asks for font-variant-numeric: tabular-nums; a typeface that has none keeps its proportional digits, and a price then breathes by a pixel or two when a 1 follows an 8. Most text faces have them, Geist does.
   • A price does not wrap. Its columns stay on one line. A long price in a narrow column needs a smaller size, which is why the preview keeps the word of the period under the price and not beside it.
   • The two values are set units under units. $129 and $1,290 share their last three columns, and the comma and the leading 1 open at the left. Values that do not line up from the right, $9.99 and $99, still work: a point facing a digit turns as one column, and reads a little less like a counter.
   • Two sources for the monthly price. With data-pricing-toggle-monthly on a price, the attribute is what the engine shows and the text is what a page without JavaScript shows. Change one, change the other, or leave the attribute out and keep the text alone.
   • Values changed after mount are not read again. destroy(), change the attributes, mount() again.
   • Keep the noscript line. It hides the switch where no script runs, so nobody presses a switch that cannot answer. The yearly note stays hidden there too, and the page shows the monthly prices.
   • A period shown on arrival that is not the monthly one, by start or by remember, is set when the script runs: put the script before the end of the body, not behind a slow loader, or the monthly side shows for a moment.
   • The switch of the preview sticks to the top of the window, so a phone keeps it in reach beside the last plan. position: sticky stops working inside an ancestor that clips (overflow: hidden or auto). The component does not need it; it is the look.
   • In Webflow the switch is a Link block. Webflow has no button element: the paste writes the switch as a link to # with role="switch", and its Embed keeps a click in place and lets Space press it.
   • **Settings handed to mount() after the page loaded are dropped.** auto() mounts on DOM ready and mount() on a block already mounted returns the existing instance. A page-wide block goes in window.PricingToggleSettings.

One click on Copy the AI prompt copies everything an assistant needs to build this effect: the complete code, the markup, the dependency, every setting and every pitfall.