NPS score from 0 to 10
Eleven tiles shading from red to green; the chosen score lifts and the scale tints up to it.
Settings
Code
<fieldset class="uv-rnp"><legend>Would you recommend us to a friend?</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>Not at all likely</span><span>Very likely</span></p></fieldset>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Radio buttons
See all Radio buttonsWhere to use it
Net Promoter Score surveys ask one question with eleven answers, and this radio group makes that row easy to read. Every tile mixes the two colors according to its number, from red for zero to green for ten. Once a score is picked it lifts in full color, the tiles before it stay tinted and the ones after it go grey.
The labels under the scale explain both ends, which helps people answer quickly. Everything is CSS, including the gradient per tile and the partial tint, so it drops into any survey form and posts a normal radio value.