Aufklappbare Zahlungsart
Drei Zahlungsarten; die gewählte klappt auf und zeigt unter dem Titel ihre Details.
Einstellungen
Code
<fieldset class="uv-rpy"><legend>Zahlungsart</legend><label><input type="radio" name="uv-rpy" checked><span class="rw"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2.5" y="5.5" width="19" height="13" rx="2.5"/><path d="M2.5 10h19M6 15h4"/></svg><span class="ti">Karte</span><span class="dt"><i></i></span></span><span class="ex"><span>Visa mit Endziffern 4242, gültig bis 08/28</span></span></label><label><input type="radio" name="uv-rpy"><span class="rw"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="7" y="2.5" width="10" height="19" rx="2.5"/><path d="M11 18.5h2"/></svg><span class="ti">Mit dem Handy bezahlen</span><span class="dt"><i></i></span></span><span class="ex"><span>Du bekommst eine Benachrichtigung, um die Zahlung freizugeben</span></span></label><label><input type="radio" name="uv-rpy"><span class="rw"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 9.5L12 4l9 5.5M5 10v8M9.7 10v8M14.3 10v8M19 10v8M3 20.5h18"/></svg><span class="ti">Überweisung</span><span class="dt"><i></i></span></span><span class="ex"><span>Die IBAN siehst du im nächsten Schritt</span></span></label></fieldset>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
Alle ansehen: RadiobuttonsWofür du ihn nutzen kannst
Checkout-Seiten brauchen oft einen erklärenden Satz zu jeder Zahlungsart. Diese Radiogruppe zeigt Karte, mobiles Bezahlen und Überweisung als Zeilen mit Symbol, die gewählte Zeile klappt weich auf und zeigt ein kurzes Detail, etwa die gespeicherte Karte oder den nächsten Schritt. So bleibt das Formular kurz und beantwortet trotzdem die naheliegende Frage.
Das Aufklappen nutzt eine Transition auf grid-template-rows, die Höhe animiert also ohne feste Werte. Ersetze Details und Symbole durch eigene und stimme die Hauptfarbe auf den Bezahl-Button ab.