NPS-Skala von 0 bis 10
Elf Kacheln von Rot bis Grün; der gewählte Wert hebt sich ab und die Skala färbt sich bis zu ihm.
Einstellungen
Code
<fieldset class="uv-rnp"><legend>Würdest du uns einem Freund empfehlen?</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>Gar nicht wahrscheinlich</span><span>Sehr wahrscheinlich</span></p></fieldset>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Radiobuttons
Alle ansehen: RadiobuttonsWofür du ihn nutzen kannst
Net-Promoter-Score-Umfragen stellen eine Frage mit elf Antworten, und diese Radiogruppe macht die Reihe gut lesbar. Jede Kachel mischt die zwei Farben je nach Zahl, von Rot bei null bis Grün bei zehn. Ist ein Wert gewählt, hebt er sich vollfarbig ab, die Kacheln davor bleiben getönt und die danach werden grau.
Die Beschriftungen unter der Skala erklären beide Enden, das hilft beim schnellen Antworten. Alles ist CSS, auch der Verlauf pro Kachel, es passt also in jedes Umfrageformular und sendet einen normalen Radio-Wert.