webdevpuneet.com

Related Snippets

57 in Pricing category
41–46 of 57

Pricing Add-On Selector

Seat-Based Pricing Calculator

Pricing Card Currency Switcher

Flip Pricing Card

Pricing Feature Table

ROI Calculator

Pricing Add-On Selector — Free Base Plan + Toggleable Add-Ons Widget

Pricing Add-On Selector · Pricing · Plain HTML, CSS & JS · Live preview

CategoryPricing
TagsE-CommerceLanding PageForms & Validation

Copy & paste

Source Code

<div class="pas-card">
  <div class="pas-head">
    <h3>Customize your plan</h3>
    <p>Start from the base plan, then add only what you need</p>
  </div>

  <div class="pas-base">
    <div class="pas-base-info">
      <span class="pas-base-name">Starter plan</span>
      <span class="pas-base-desc">Core features, 5 seats included</span>
    </div>
    <b class="pas-base-price">$29<small>/mo</small></b>
  </div>

  <ul class="pas-addons" id="pasAddons">
    <li class="pas-addon" data-price="12">
      <label>
        <input type="checkbox" class="pas-check" />
        <span class="pas-addon-info">
          <span class="pas-addon-name">Advanced analytics</span>
          <span class="pas-addon-desc">Cohort reports and custom dashboards</span>
        </span>
      </label>
      <b class="pas-addon-price">+$12<small>/mo</small></b>
    </li>
    <li class="pas-addon" data-price="18">
      <label>
        <input type="checkbox" class="pas-check" />
        <span class="pas-addon-info">
          <span class="pas-addon-name">Priority support</span>
          <span class="pas-addon-desc">1-hour response time, dedicated channel</span>
        </span>
      </label>
      <b class="pas-addon-price">+$18<small>/mo</small></b>
    </li>
    <li class="pas-addon" data-price="9">
      <label>
        <input type="checkbox" class="pas-check" />
        <span class="pas-addon-info">
          <span class="pas-addon-name">Extra storage (1TB)</span>
          <span class="pas-addon-desc">On top of the 50GB included</span>
        </span>
      </label>
      <b class="pas-addon-price">+$9<small>/mo</small></b>
    </li>
    <li class="pas-addon" data-price="25">
      <label>
        <input type="checkbox" class="pas-check" />
        <span class="pas-addon-info">
          <span class="pas-addon-name">SSO &amp; SAML</span>
          <span class="pas-addon-desc">Enterprise single sign-on</span>
        </span>
      </label>
      <b class="pas-addon-price">+$25<small>/mo</small></b>
    </li>
  </ul>

  <div class="pas-total">
    <div class="pas-total-row">
      <span>Base plan</span>
      <span id="pasBaseLine">$29.00</span>
    </div>
    <div class="pas-total-row" id="pasAddonsLine" hidden>
      <span id="pasAddonsLabel">Add-ons (0)</span>
      <span id="pasAddonsAmt">$0.00</span>
    </div>
    <div class="pas-total-row pas-grand">
      <span>Total</span>
      <b id="pasTotal">$29.00<small>/mo</small></b>
    </div>
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

DOM-driven pricing
Each add-on's price lives in one data-price attribute, not a duplicate array.
Full recompute per change
Total is derived fresh from checked boxes, never incremented in place.
Conditional line item
Add-ons subtotal only shows once something is actually selected.
Live selection count
The add-ons label states how many are currently checked.
Per-row highlight
:has() styles a checked row's border, background, and price color.
Formatted currency
Two-decimal, locale-aware money formatting throughout.
Pure reduce math
Array.reduce sums selected add-on prices — easy to audit or test.
Framework-agnostic core
render() ports directly to any component's state and effects.

About this UI Snippet

Pricing Add-On Selector — A Base Plan Plus a Live-Summing Add-On Checklist

Screenshot of the Pricing Add-On Selector snippet rendered live

Modular pricing — a base plan plus optional add-ons — lets customers pay only for what they use, but it only works if the running total is obvious and instant. This snippet builds that add-on selector in plain HTML, CSS, and vanilla JavaScript: a fixed base price, a checklist of add-ons each with its own monthly price, and a total that recomputes the moment a checkbox changes.

One source of truth for price

Each add-on's price lives in a single data-price attribute on its list item, read directly from the DOM rather than duplicated in a JavaScript array. render() filters the add-on elements down to the ones whose checkbox is checked, sums their data-price values with reduce, and adds that to the fixed BASE_PRICE constant. Because the price and the checkbox state both live on the same element, there's no separate data model to keep in sync with the markup.

Real, verifiable math

The base plan is $29/mo. The four add-ons are priced at $12 (advanced analytics), $18 (priority support), $9 (extra storage), and $25 (SSO & SAML). Selecting all four adds $12 + $18 + $9 + $25 = $64/mo, for a grand total of $29 + $64 = $93/mo — and selecting any subset sums correctly because the total is always recomputed from scratch off the currently-checked boxes, never incremented or decremented in place.

A line item only when it matters

The add-ons subtotal row stays hidden until at least one add-on is selected, then appears labeled with a live count ("Add-ons (2)") and a "+$" prefixed amount. This keeps the breakdown clean for someone who wants only the base plan, while making the incremental cost fully visible the moment they start customizing.

Visual feedback per row

A checked add-on's row gets a highlighted border and background via a :has() selector targeting its own checkbox, and its price label switches to the accent color — so a glance down the list shows exactly what's included without reading every checkbox state individually.

Where it fits

Pair it with a pricing card for the base tiers, follow it with a usage calculator if some add-ons scale with usage, or route the final total into a plan selector flow at checkout.

Customizing it

Swap in your real base price and add-on catalog, add per-add-on quantity steppers instead of simple checkboxes, or group add-ons into categories with their own subtotals.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA $29/mo base plan renders with four unchecked add-ons.
  2. 2
    Check an add-onIts price adds to the total and the add-ons line appears.
  3. 3
    Check severalThe total is always base price plus the sum of checked add-ons.
  4. 4
    Uncheck oneThe total recomputes down immediately — nothing is left stale.
  5. 5
    Verify the mathAll four add-ons checked: $29 + $12 + $18 + $9 + $25 = $93/mo.
  6. 6
    Wire up real pricingReplace BASE_PRICE and each data-price with your live catalog.

Real-world uses

Common Use Cases

SaaS base-plus-extras pricing
Keep a base tier simple while optional add-ons each carry their own price in one data-price attribute, summed into a live total.
Usage-based extras
Pair with a usage calculator for metered options, with the total always derived fresh from checked boxes rather than incremented.
Enterprise upsells
Offer SSO or premium support next to enterprise pricing, with an add-ons subtotal line appearing only when something is selected.
Checkout customisation
Feed the selected add-ons and total into a plan selector or checkout step, with a live count of how many are checked.
Plan pages and quoting tools
Sit beside a pricing card grid as the customisation step, or let sales reps build a live quote for a prospect.
Related: Annual vs Monthly Cost Chart
See the Annual vs Monthly Cost Chart for a related pricing pattern worth pairing with this one.
Related: Subscription Billing Toggle
See the Subscription Billing Toggle for a related pricing pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

render() filters the add-on list down to elements whose checkbox is checked, sums each one's data-price attribute with Array.reduce, and adds that sum to the fixed BASE_PRICE constant of $29. It's a full recomputation from the current checkbox state every time, not an incremental add or subtract, so the total can never drift out of sync.

The four add-ons are $12, $18, $9, and $25 — summing to $64/mo. Added to the $29/mo base plan, the grand total with every add-on checked is $93/mo. Checking a subset, say analytics and SSO, gives $29 + $12 + $25 = $66/mo.

It only renders once at least one add-on is checked, so someone who wants just the base plan sees a clean two-line total (base price and grand total) instead of a permanent zero-dollar line. The moment a box is checked, the line appears with a live count and a "+$" prefixed subtotal.

A CSS :has() selector on .pas-addon targets rows containing a checked .pas-check input, applying a highlighted border, background tint, and accent-colored price label purely in CSS. No class needs to be toggled by JavaScript for the visual state — only the price total requires script.

Model add-ons as an array of {name, description, price, selected} objects in state. Derive the addons total and grand total with a memoized selector over the selected items, and bind each checkbox's onChange to toggle its item's selected flag. The pricing math is pure and copies over unchanged.