HTML + CSSRadio buttons
Pricing plan selector
Plans stacked as rows with their price; the chosen one grows slightly and shows a tick.
Settings
16px
1x
Code
<div class="uv-rdp"><label><input type="radio" name="rdp"><span class="pl"><span class="ck"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></span><b>Basic</b><em>0 €<span>/mes</span></em></span></label><label><input type="radio" name="rdp" checked><span class="pl"><span class="ck"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></span><b>Pro</b><em>12 €<span>/mes</span></em></span></label><label><input type="radio" name="rdp"><span class="pl"><span class="ck"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></span><b>Enterprise</b><em>39 €<span>/mes</span></em></span></label></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Radio buttons
Where to use it
Built for the moment someone picks a plan: the sign-up step of a SaaS, choosing a membership at a gym or a subscription box. Each row shows the name and monthly price; the selected one grows a little and gets a tick. A pricing radio group in HTML and CSS that fits a narrow checkout column.
Preselect the plan most people should choose, as the demo does with the middle one, but never hide the free option. If a plan has a trial, add it under the name instead of cramming it next to the price.