OneTaskBy Tim King · Updated
Pricing Toggle
Monthly and Yearly Price Switch in Pure CSS
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Pricing Toggle works
A pricing toggle is the Monthly and Yearly switch above a pricing section that swaps every plan's price at once. Enter each plan's monthly and yearly price, add a badge such as Save 20%, and copy HTML and CSS that works without any JavaScript.
Offering a yearly plan at a discount brings in cash up front and keeps customers longer, and a switch lets visitors compare both prices without a second table. The badge on the yearly option nudges people towards it.
How the pricing toggle works without JavaScript
The switch is two radio buttons in a <fieldset>, styled as a pill with the labels as the
visible buttons. Each plan holds both prices in the HTML. The CSS :has() selector checks whether
the yearly radio is checked anywhere inside the section, and if it is, hides the monthly prices and
shows the yearly ones. Every current browser supports :has().
Keyboard and screen readers
Because the switch is made of real radio buttons, the arrow keys move between Monthly and Yearly,
the Tab key reaches it once, and screen readers announce "Billing period" from the hidden legend
followed by the selected option. The radios are hidden with opacity rather than display: none,
so they stay focusable and show a focus ring on the label.
FAQ
Should the yearly price show the full year or the monthly equivalent?
Both are common. Showing the monthly equivalent, such as $15 a month billed yearly, makes the saving easy to see, while the full yearly figure is more transparent. To show the equivalent, enter it as the yearly price and change "/ year" to "/ month, billed yearly" in the HTML.
Can I have more than one toggle on a page?
Give each set of radios its own name and ids, and update the id in the two :has() rules to
match. Otherwise the radios in both switches act as one group.
Why not use a checkbox styled as a toggle switch?
A switch reads as on and off, which is less clear than two named choices. Two radio buttons say exactly what each option is, and screen readers announce the choice by name.
Which option should be selected by default?
Monthly is the usual default because it shows the lower headline number. Some sites default to
yearly to push the discount. Move the checked attribute to the yearly radio to do that.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Pricing Table Builder
Build a responsive pricing table of plans with a featured one.
Pricing Card Builder
Pricing plan cards with price, feature ticks, ribbon and CTA.
Tabs Builder
Build accessible tabs with arrow key support and three styles.
Testimonial Grid
Build a masonry wall of testimonials with avatars and stars.
Comparison Card Builder
Side-by-side comparison cards with ticks, crosses and a highlighted column.