Auswahl für Tarife
Tarife als Zeilen mit Preis untereinander; der gewählte wird leicht größer und zeigt einen Haken.
Einstellungen
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 für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Radiobuttons
Wofür du ihn nutzen kannst
Gemacht für den Moment, in dem jemand einen Tarif wählt: der Registrierungsschritt eines SaaS, die Mitgliedschaft im Fitnessstudio oder eine Abo-Box. Jede Zeile zeigt Namen und Monatspreis, die gewählte wächst leicht und bekommt Haken und farbigen Preis. Eine Tarifauswahl mit Radio-Buttons in HTML und CSS, die auch in eine schmale Checkout-Spalte passt.
Wähl den Tarif vor, der für die meisten passt, wie die Demo mit dem mittleren, aber versteck nie die kostenlose Option. Gibt es eine Testphase, schreib sie unter den Namen, statt sie neben den Preis zu quetschen.