Umfrage mit Ergebnissen
Nach der Abstimmung wird jede Option zu einem Balken, der bis zu ihrem Prozentwert wächst.
Einstellungen
Code
<fieldset class="uv-rpl"><legend>Wo verbringst du deinen Urlaub?</legend><label style="--v:46%"><input type="radio" name="uv-rpl"><span class="br"></span><span class="tx">Strand</span><span class="pc">46 %</span></label><label style="--v:31%"><input type="radio" name="uv-rpl"><span class="br"></span><span class="tx">Berge</span><span class="pc">31 %</span></label><label style="--v:17%"><input type="radio" name="uv-rpl"><span class="br"></span><span class="tx">Stadt</span><span class="pc">17 %</span></label><label style="--v:6%"><input type="radio" name="uv-rpl"><span class="br"></span><span class="tx">Zu Hause</span><span class="pc">6 %</span></label><p class="ft">1.284 Stimmen</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
Umfragen machen mehr Spaß, wenn man das Ergebnis sofort sieht. Vor der Abstimmung zeigt die Karte schlichte Optionen mit Kontur, danach wird jede Zeile zu einem Balken, der auf seinen Anteil wächst. Die Prozente gleiten herein, deine Option bekommt einen Haken und einen zart gefärbten Balken, unten blendet die Gesamtzahl der Stimmen ein.
Die Prozente legst du pro Option per CSS-Variable fest, du kannst sie also aus dem Backend füllen. Passt zu Blogs, Newslettern, Community-Apps und Eventseiten und funktioniert dank :has ohne JavaScript.