Note NPS de 0 à 10
Onze cases qui vont du rouge au vert ; la note choisie se soulève et l'échelle se teinte jusqu'à elle.
Réglages
Code
<fieldset class="uv-rnp"><legend>Nous recommanderais-tu à un ami ?</legend><div class="sc"><label style="--i:0"><input type="radio" name="uv-rnp"><span>0</span></label><label style="--i:1"><input type="radio" name="uv-rnp"><span>1</span></label><label style="--i:2"><input type="radio" name="uv-rnp"><span>2</span></label><label style="--i:3"><input type="radio" name="uv-rnp"><span>3</span></label><label style="--i:4"><input type="radio" name="uv-rnp"><span>4</span></label><label style="--i:5"><input type="radio" name="uv-rnp"><span>5</span></label><label style="--i:6"><input type="radio" name="uv-rnp"><span>6</span></label><label style="--i:7"><input type="radio" name="uv-rnp"><span>7</span></label><label style="--i:8"><input type="radio" name="uv-rnp" checked><span>8</span></label><label style="--i:9"><input type="radio" name="uv-rnp"><span>9</span></label><label style="--i:10"><input type="radio" name="uv-rnp"><span>10</span></label></div><p class="lg"><span>Pas du tout probable</span><span>Très probable</span></p></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 enquêtes Net Promoter Score posent une question avec onze réponses, et ce groupe de boutons radio rend la rangée facile à lire. Chaque case mélange les deux couleurs selon son chiffre, du rouge pour zéro au vert pour dix. Une fois la note choisie, elle se soulève en pleine couleur, les cases avant restent teintées et celles d'après passent au gris.
Les libellés sous l'échelle expliquent les deux extrémités, ce qui aide à répondre vite. Tout est en CSS, y compris le dégradé par case, il s'intègre donc à n'importe quel formulaire.