Puntuación NPS de 0 a 10
Once casillas que van de rojo a verde; la puntuación elegida se levanta y la escala se tiñe hasta ella.
Ajustes
Código
<fieldset class="uv-rnp"><legend>¿Nos recomendarías a un amigo?</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>Nada probable</span><span>Muy probable</span></p></fieldset>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Radio buttons
Ver todos: Radio buttonsDónde usarlo
Las encuestas Net Promoter Score hacen una pregunta con once respuestas, y este grupo de radios hace que esa fila se lea fácil. Cada casilla mezcla los dos colores según su número, de rojo para el cero a verde para el diez. Al elegir una puntuación, se levanta a todo color, las anteriores se quedan teñidas y las siguientes pasan a gris.
Las etiquetas bajo la escala explican los dos extremos, lo que ayuda a contestar rápido. Todo es CSS, incluido el degradado por casilla, así que encaja en cualquier formulario y envía un valor de radio normal.