Subscription Billing Toggle — Free HTML CSS JS Pricing Switch Snippet

<div class="pricing-page">
  <div class="billing-switch">
    <span class="switch-label" id="monthlyLabel">Monthly</span>
    <button class="toggle" id="billingToggle" role="switch" aria-checked="false" aria-label="Toggle yearly billing" onclick="toggleBilling()">
      <span class="toggle-thumb"></span>
    </button>
    <span class="switch-label" id="yearlyLabel">Yearly <span class="save-badge" id="saveBadge">Save 20%</span></span>
  </div>

  <div class="plans">
    <div class="plan-card" data-monthly="9" data-yearly="86">
      <h3>Starter</h3>
      <div class="price"><span class="amount">$9</span><span class="period">/mo</span></div>
      <p class="billed-as" data-monthly-text="Billed monthly" data-yearly-text="$86 billed yearly">Billed monthly</p>
      <ul>
        <li>1 project</li>
        <li>Basic analytics</li>
        <li>Email support</li>
      </ul>
      <button class="plan-btn">Choose Starter</button>
    </div>
    <div class="plan-card featured" data-monthly="29" data-yearly="278">
      <span class="popular-badge">Most popular</span>
      <h3>Pro</h3>
      <div class="price"><span class="amount">$29</span><span class="period">/mo</span></div>
      <p class="billed-as" data-monthly-text="Billed monthly" data-yearly-text="$278 billed yearly">Billed monthly</p>
      <ul>
        <li>Unlimited projects</li>
        <li>Advanced analytics</li>
        <li>Priority support</li>
        <li>Team collaboration</li>
      </ul>
      <button class="plan-btn primary">Choose Pro</button>
    </div>
    <div class="plan-card" data-monthly="79" data-yearly="758">
      <h3>Business</h3>
      <div class="price"><span class="amount">$79</span><span class="period">/mo</span></div>
      <p class="billed-as" data-monthly-text="Billed monthly" data-yearly-text="$758 billed yearly">Billed monthly</p>
      <ul>
        <li>Everything in Pro</li>
        <li>SSO &amp; audit logs</li>
        <li>Dedicated account manager</li>
      </ul>
      <button class="plan-btn">Choose Business</button>
    </div>
  </div>
</div>

* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; background: #f8fafc; padding: 40px 24px; margin: 0; display: flex; align-items: center; flex-direction: column; gap: 20px; }

.pricing-page { width: 100%; max-width: 880px; margin: 0 auto; }

.billing-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 36px;
}

.switch-label { font-size: 14px; font-weight: 600; color: #94a3b8; transition: color 0.15s; }
.switch-label.active { color: #1e293b; }

.save-badge {
  display: inline-block;
  background: #dcfce7;
  color: #166534;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 6px;
}

.toggle {
  width: 48px;
  height: 26px;
  border-radius: 999px;
  background: #cbd5e1;
  border: none;
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;
}
.toggle[aria-checked="true"] { background: #6366f1; }

.toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform 0.2s ease;
}
.toggle[aria-checked="true"] .toggle-thumb { transform: translateX(22px); }

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.plan-card {
  position: relative;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 28px 22px;
  text-align: center;
}
.plan-card.featured {
  border-color: #6366f1;
  box-shadow: 0 12px 30px rgba(99,102,241,0.15);
  transform: scale(1.03);
}

.popular-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #6366f1;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
}

.plan-card h3 { font-size: 16px; color: #1e293b; margin: 0 0 14px; }

.price { margin-bottom: 4px; }
.amount { font-size: 32px; font-weight: 800; color: #1e293b; }
.period { font-size: 13px; color: #94a3b8; }

.billed-as { font-size: 12px; color: #94a3b8; margin: 0 0 20px; }

.plan-card ul { list-style: none; margin: 0 0 22px; padding: 0; text-align: left; }
.plan-card li {
  font-size: 13px;
  color: #475569;
  padding: 7px 0 7px 22px;
  position: relative;
}
.plan-card li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #16a34a;
  font-weight: 700;
}

.plan-btn {
  width: 100%;
  padding: 11px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #1e293b;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.plan-btn:hover { background: #f1f5f9; }
.plan-btn.primary { background: #6366f1; color: #fff; border-color: #6366f1; }
.plan-btn.primary:hover { background: #4f46e5; }

const toggle = document.getElementById('billingToggle');
const monthlyLabel = document.getElementById('monthlyLabel');
const yearlyLabel = document.getElementById('yearlyLabel');

function toggleBilling() {
  const isYearly = toggle.getAttribute('aria-checked') !== 'true';
  toggle.setAttribute('aria-checked', String(isYearly));
  monthlyLabel.classList.toggle('active', !isYearly);
  yearlyLabel.classList.toggle('active', isYearly);
  updatePrices(isYearly);
}

function updatePrices(isYearly) {
  document.querySelectorAll('.plan-card').forEach((card) => {
    const monthly = parseFloat(card.dataset.monthly);
    const yearly = parseFloat(card.dataset.yearly);
    const amountEl = card.querySelector('.amount');
    const billedAsEl = card.querySelector('.billed-as');

    if (isYearly) {
      // Show the equivalent monthly rate when billed yearly, e.g. $278/yr -> $23.17/mo.
      const monthlyEquivalent = (yearly / 12).toFixed(2).replace(/\.00$/, '');
      amountEl.textContent = '$' + monthlyEquivalent;
      billedAsEl.textContent = billedAsEl.dataset.yearlyText;
    } else {
      amountEl.textContent = '$' + monthly;
      billedAsEl.textContent = billedAsEl.dataset.monthlyText;
    }
  });
}

// Initialize labels to reflect the default (monthly) state.
monthlyLabel.classList.add('active');