HTML + CSSRadio buttons
Selector de planes
Planes en filas con su precio; el elegido crece un poco y muestra un check.
Ajustes
16px
1x
Código
<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 para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Radio buttons
Dónde usarlo
Pensado para el momento de elegir plan: el paso de registro de un SaaS, la cuota de un gimnasio o una caja de suscripción. Cada fila muestra el nombre y el precio al mes; la elegida se agranda un poco y lleva un check. Un selector de precios en HTML y CSS que cabe en un checkout estrecho.
Deja marcado el plan que más gente debería elegir, como hace la demo con el del medio, pero no escondas nunca la opción gratuita. Si un plan tiene prueba gratis, ponlo bajo el nombre en vez de apretarlo junto al precio.