Choix du moyen de paiement dépliant
Trois moyens de paiement ; celui choisi se déplie et montre ses détails sous le titre.
Réglages
Code
<fieldset class="uv-rpy"><legend>Moyen de paiement</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">Carte</span><span class="dt"><i></i></span></span><span class="ex"><span>Visa se terminant par 4242, expire le 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">Paiement mobile</span><span class="dt"><i></i></span></span><span class="ex"><span>Tu recevras une notification pour accepter le paiement</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">Virement</span><span class="dt"><i></i></span></span><span class="ex"><span>Tu verras l’IBAN à l’étape suivante</span></span></label></fieldset>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Boutons radio
Voir tout : Boutons radioOù l’utiliser
Les pages de paiement ont souvent besoin d'une phrase d'explication à côté de chaque option. Ce groupe de boutons radio présente carte, paiement mobile et virement en lignes avec icône, et la ligne choisie se déplie en douceur pour révéler un court détail, comme la carte enregistrée ou l'étape suivante. Le formulaire reste court tout en répondant à la question évidente.
Le dépliage utilise une transition sur grid-template-rows, la hauteur s'anime donc sans valeur fixe. Remplace les détails et les icônes par les tiens, et accorde la couleur principale au bouton de paiement qui suit.