HTML + CSSBoutons radio
Échelle de visages
Cinq visages pour noter une expérience : celui choisi grandit et affiche son mot, les autres passent au gris.
Réglages
16px
1x
Code
<fieldset class="uv-rem"><legend>Comment s’est passée ta commande ?</legend><div class="op"><label><input type="radio" name="uv-rem"><span class="fc" aria-hidden="true">😣</span><span class="tx">Très mauvais</span></label><label><input type="radio" name="uv-rem"><span class="fc" aria-hidden="true">🙁</span><span class="tx">Moyen</span></label><label><input type="radio" name="uv-rem"><span class="fc" aria-hidden="true">😐</span><span class="tx">Normal</span></label><label><input type="radio" name="uv-rem" checked><span class="fc" aria-hidden="true">🙂</span><span class="tx">Bien</span></label><label><input type="radio" name="uv-rem"><span class="fc" aria-hidden="true">😍</span><span class="tx">J’adore</span></label></div></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 questions de satisfaction rapides obtiennent plus de réponses quand un seul geste suffit. Ce groupe de boutons radio affiche cinq visages, de fâché à ravi ; celui choisi grandit avec un anneau coloré et révèle un mot en dessous, les autres restent petits et gris. Place-le après une commande, un chat d'assistance ou un cours.
Chaque visage est un vrai bouton radio : les flèches du clavier passent de l'un à l'autre et les lecteurs d'écran lisent le mot, pas l'emoji. Change la question avec le champ de texte.