Cartes radio avec icône
Chaque option est une petite carte avec une icône ; la carte choisie se soulève et sa bordure s’allume.
Réglages
Code
<div class="uv-rdc"><label><input type="radio" name="rdc" checked><span class="cd"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11l8-7 8 7v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z"/></svg><b>Maison</b></span></label><label><input type="radio" name="rdc"><span class="cd"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7h18v12H3zM8 7V4h8v3"/></svg><b>Bureau</b></span></label><label><input type="radio" name="rdc"><span class="cd"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l9 7v9H3v-9z M9 19v-5h6v5"/></svg><b>Commerce</b></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
Les cartes rendent le choix concret quand chaque option se visualise facilement. Une entreprise de ménage qui demande le type de lieu, le type d’adresse dans un formulaire de livraison ou un devis d’assurance habitation : maison, bureau ou commerce, chacun avec son icône. Des cartes radio en HTML et CSS, faciles à toucher sur mobile.
Ici, les icônes font la moitié du travail : choisissez-en qui distinguent vraiment les options. Trois ou quatre cartes tiennent sur une ligne ; au-delà, laissez-les passer à la ligne plutôt que de les rétrécir.