Expanding payment method picker
Three payment options; the selected one expands to show its details below the title.
Settings
Code
<fieldset class="uv-rpy"><legend>Payment method</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">Card</span><span class="dt"><i></i></span></span><span class="ex"><span>Visa ending in 4242, expires 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">Mobile payment</span><span class="dt"><i></i></span></span><span class="ex"><span>You’ll get a notification to approve the charge</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">Bank transfer</span><span class="dt"><i></i></span></span><span class="ex"><span>You’ll see the IBAN in the next step</span></span></label></fieldset>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
See all Radio buttonsWhere to use it
Checkout pages often need a word of explanation next to each payment option. This radio group shows card, mobile payment and bank transfer as rows with an icon, and the selected row expands smoothly to reveal a short detail, such as the saved card or what happens next. It keeps the form short while answering the obvious question.
The expansion uses a grid row transition, so the height animates without fixed values. Replace the details with your own copy and icons, and set the main color to match the pay button that comes after it.