Sternebewertung mit Text
Die Sterne füllen sich bis zum angeklickten, hüpfen kurz, und darunter steht, was die Note bedeutet.
Einstellungen
Code
<div class="uv-rdt"><div class="rw"><button data-v="1"><svg viewBox="0 0 24 24"><path d="M12 2.6l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.5 6.1 20.6l1.2-6.5L2.5 9.5l6.6-.9z"/></svg></button><button data-v="2"><svg viewBox="0 0 24 24"><path d="M12 2.6l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.5 6.1 20.6l1.2-6.5L2.5 9.5l6.6-.9z"/></svg></button><button data-v="3"><svg viewBox="0 0 24 24"><path d="M12 2.6l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.5 6.1 20.6l1.2-6.5L2.5 9.5l6.6-.9z"/></svg></button><button data-v="4"><svg viewBox="0 0 24 24"><path d="M12 2.6l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.5 6.1 20.6l1.2-6.5L2.5 9.5l6.6-.9z"/></svg></button><button data-v="5"><svg viewBox="0 0 24 24"><path d="M12 2.6l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.5 6.1 20.6l1.2-6.5L2.5 9.5l6.6-.9z"/></svg></button></div><b class="lb">Nicht bewertet</b></div>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
Wofür du ihn nutzen kannst
Die bekannten fünf Sterne für Bewertungen und schnelles Feedback: ein Produkt nach der Lieferung bewerten, einen Online-Kurs benoten oder der Bildschirm „Wie hat es dir geschmeckt?“ in einer Restaurant-App. Das Label darunter wechselt von „Sehr schlecht“ bis „Ausgezeichnet“ und hilft bei der Wahl. Ein Star-Rating in CSS mit kleinem Script.
Formulier die fünf Labels in deinem eigenen Ton, sie sind wichtiger, als man denkt. Zeigst du an einer anderen Stelle der Seite die Durchschnittsnote, nimm für beides dieselbe Farbe, damit es zusammengehört.