→ Julian Parker
→ Elegant Pricing Plan Selector with Radio...

Elegant Pricing Plan Selector with Radio Buttons

Custom-styled radio button component for selecting pricing plans, featuring modern design and intuitive user experience for subscription selection.

This Example is contributed by Julian Parker, on 12-Mar-2025. It is responsive. similar terms for this example are Subscription Plan,Pricing Tier,Pricing Table,Pricing,Service rates,Subscription plans

Radio Pricing Card

Author Julian Parker

Fork Fullscreen

<div class="pricing-selector-container">
  <h2>Choose Your Plan</h2>
  <div class="pricing-plans">
    <div class="pricing-plan">
      <input type="radio" id="basic" name="pricing" value="basic" checked>
      <label for="basic" class="plan-label">
        <div class="plan-header">
          <h3>Basic</h3>
          <span class="price">$9.99<span class="period">/month</span></span>
        </div>
        <ul class="features">
          <li>Core features access</li>
          <li>Up to 2 projects</li>
          <li>Basic support</li>
          <li>5GB storage</li>
        </ul>
        <div class="best-for">Best for individuals</div>
      </label>
    </div>
    
    <div class="pricing-plan">
      <input type="radio" id="professional" name="pricing" value="professional">
      <label for="professional" class="plan-label">
        <div class="plan-header">
          <h3>Professional</h3>
          <span class="price">$19.99<span class="period">/month</span></span>
        </div>
        <ul class="features">
          <li>All Basic features</li>
          <li>Up to 10 projects</li>
          <li>Priority support</li>
          <li>25GB storage</li>
        </ul>
        <div class="best-for">Best for small teams</div>
      </label>
    </div>
    
    <div class="pricing-plan">
      <input type="radio" id="enterprise" name="pricing" value="enterprise">
      <label for="enterprise" class="plan-label">
        <div class="plan-header">
          <h3>Enterprise</h3>
          <span class="price">$49.99<span class="period">/month</span></span>
        </div>
        <ul class="features">
          <li>All Professional features</li>
          <li>Unlimited projects</li>
          <li>24/7 dedicated support</li>
          <li>100GB storage</li>
        </ul>
        <div class="best-for">Best for organizations</div>
      </label>
    </div>
  </div>
  
  <div class="action-buttons">
    <button class="continue-btn">Continue with selected plan</button>
  </div>
</div>

Related Examples