HTML + CSSRadio buttons
Método de pago desplegable
Tres opciones de pago; la elegida se despliega y enseña sus detalles bajo el título.
Ajustes
16px
1x
Código
<fieldset class="uv-rpy"><legend>Método de pago</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">Tarjeta</span><span class="dt"><i></i></span></span><span class="ex"><span>Visa terminada en 4242, caduca el 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">Pago con el móvil</span><span class="dt"><i></i></span></span><span class="ex"><span>Te llegará una notificación para aceptar el cobro</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">Transferencia</span><span class="dt"><i></i></span></span><span class="ex"><span>Verás el IBAN en el siguiente paso</span></span></label></fieldset>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
Ver todos: Radio buttonsDónde usarlo
Las páginas de pago suelen necesitar una frase de explicación junto a cada opción. Este grupo de radios muestra tarjeta, pago con el móvil y transferencia como filas con icono, y la fila elegida se despliega suave para enseñar un detalle corto, como la tarjeta guardada o lo que pasará después. Mantiene el formulario corto y responde a la duda evidente.
El despliegue usa una transición de grid-template-rows, así que la altura se anima sin valores fijos. Cambia los detalles y los iconos por los tuyos y ajusta el color al botón de pagar.