HTML + CSSBoutons radio
Sélecteur de formules
Les formules en lignes avec leur prix ; celle choisie grandit un peu et affiche une coche.
Réglages
16px
1x
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 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
Où l’utiliser
Conçu pour le moment où l’on choisit une formule : l’étape d’inscription d’un SaaS, l’abonnement d’une salle de sport ou une box mensuelle. Chaque ligne affiche le nom et le prix mensuel ; la formule choisie grandit un peu et reçoit une coche. Un sélecteur de tarifs en HTML et CSS qui tient dans une colonne de paiement étroite.
Présélectionnez la formule qui convient au plus grand nombre, comme la démo avec celle du milieu, sans jamais cacher l’option gratuite. Si une formule inclut un essai, indiquez-le sous le nom plutôt qu’à côté du prix.