React Rating Stars: Halbe Sterne, Hover und Tastatur

Du brauchst React Rating Stars für eine Produktbewertung, eine Händlerbewertung oder ein Feedback-Formular. Fünf Stern-Icons und ein Click-Handler sind in zehn Minuten fertig. Dann fragt jemand nach halben Sternen. Wer nur die Tastatur nutzt, springt per Tab auf die Reihe, und nichts bewegt sich. Auf dem Smartphone zieht jemand den Daumen über die Sterne, und statt der Bewertung scrollt die Seite. Und die Produktseite muss aus 126 Bewertungen immer noch einen Durchschnitt und eine Verteilung machen. Dieser Guide zeigt, was eine React Star Rating Komponente können muss, wie sich die gängigen Pakete unterscheiden, und baut komplette Beispiele mit Rating und Reviews von Wingo UI.

Was muss eine React Rating Komponente können?

Sechs Dinge. Fünf Icons mit einem Click-Handler erledigen nur das erste:

1. Klicken oder Tippen zum Bewerten, mit einem Weg, die Bewertung wieder zu löschen.
2. Halbe Werte, je nachdem, wo der Zeiger auf dem Stern landet.
3. Eine Hover-Vorschau, damit Sterne und Label zeigen, was ein Klick auswählen wird, bevor er passiert.
4. Bedienung per Tastatur mit einem Wert, den ein Screenreader vorlesen kann („Gut“, „3.5 of 5“).
5. Ein Touch-Layout: Ziele von mindestens 44px und ein Wischen per Finger, das die Seite nicht scrollt.
6. Ein schreibgeschützter Modus für Durchschnitte wie 4,3, gezeichnet als Bruchteil eines Sterns.

Der letzte Punkt verbindet Eingabe und Ausgabe. Die Sterne, die Leute in einem Formular wählen, sind dieselben, die eine Produktseite neben dem Durchschnitt zeigt. Eine einzige Komponente sollte also beides können.

Wie unterscheiden sich die React Star Rating Pakete?

MUI Rating ist am vollständigsten, wenn du schon Material UI nutzt, die kleinen npm-Pakete reichen für eine schnelle Anzeige, und das Rating von Wingo UI ist eine Pro-Komponente als Quellcode, gebaut für Touch und Formulare. Die Fakten stammen aus der Doku, dem README und der npm Registry des jeweiligen Projekts, Stand Oktober 2026.

Wenn deine App auf Material UI läuft, nimm MUI Rating: Es ist gut dokumentiert, und sein Beispiel mit Hover-Label (onChangeActive) deckt die Vorschau ab. Wenn du nur eine Bewertung anzeigst, reicht ein kleines Paket oder eine schreibgeschützte Komponente, wobei react-rating-stars-component seit 2020 nicht mehr veröffentlicht wurde. Der Rest dieses Guides dreht sich um das Rating von Wingo UI.

Wie baue ich eine React Sternebewertung in ein Formular ein?

Gib ihr ein label, einen kontrollierten value und einen name. Mit name schickt ein verstecktes Input-Feld den Wert mit, sodass ein normales Formular oder eine Server Action ihn wie jedes andere Feld liest: "0", wenn nichts gewählt ist, "4.5" mit halben Sternen.

npx wingo-ui@latest add rating textarea button

"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Rating } from "@/components/ui/rating";
import { Textarea } from "@/components/ui/textarea";

const LABELS = ["Sehr schlecht", "Schlecht", "Okay", "Gut", "Ausgezeichnet"];

export function ReviewForm({ saveReview }: { saveReview: (data: FormData) => Promise<void> }) {
  const [rating, setRating] = useState(0);
  const [tried, setTried] = useState(false);

  return (
    <form
      noValidate
      className="flex flex-col gap-4"
      action={async (data) => {
        // das versteckte Input-Feld sendet "0", solange nichts gewählt ist
        if (Number(data.get("rating")) === 0) {
          setTried(true);
          return;
        }
        await saveReview(data);
      }}
    >
      <Rating
        label="Wie war deine Erfahrung?"
        name="rating"
        value={rating}
        onValueChange={(next) => {
          setRating(next);
          if (next > 0) setTried(false);
        }}
        labels={LABELS}
        showLabel
        emptyLabel="Tipp auf einen Stern"
        required
        error={tried && rating === 0 ? "Wähl eine Bewertung." : undefined}
      />
      <Textarea label="Kommentar" name="comment" maxLength={500} showCount minRows={2} />
      <Button type="submit">Bewertung senden</Button>
    </form>
  );
}

labels hat zwei Aufgaben: Mit showLabel steht neben den Sternen das Label des Werts unter dem Zeiger oder des gewählten Werts, und jedes Label ist der Text, den ein Screenreader für diesen Wert vorliest. required zeigt nur die Markierung hinter dem Label an, die Prüfung bleibt also wie oben in deinem Formular. error färbt die leeren Sterne rot und setzt aria-invalid. Label, Beschreibung und Fehler kommen aus der kostenlosen Field-Anatomie, die jedes Eingabefeld von Wingo UI nutzt.

Fahr mit der Maus über die Sterne und klick dann einen an. Drück vorher einmal auf Send rating, ohne etwas zu wählen.

Wie funktionieren halbe Sterne in React?

Jeder Stern wird in der Mitte geteilt. Mit allowHalf ergibt ein Zeiger auf der linken Hälfte eines Sterns x,5 und auf der rechten Hälfte den ganzen Stern (gespiegelt auf Seiten mit Schreibrichtung von rechts nach links). Die Füllung ist dasselbe Icon, zweimal gezeichnet: eine leere Ebene mit geringer Deckkraft und eine farbige Ebene, auf einen Prozentwert zugeschnitten. Ein halber Stern ist also das volle Icon, zu 50% zugeschnitten. Deshalb funktioniert jedes lucide-Icon über die Prop icon, etwa <Heart />. Ein anderes Muster für halbe Sterne in React ist ein eigenes Halbstern-Symbol (react-rating-stars-component nimmt dafür eine Prop halfIcon); der Zuschnitt macht das überflüssig.

<Rating aria-label="Bewerte dieses Fahrrad" allowHalf tone="warning" showValue locale="de-DE" defaultValue={3.5} />

tone="warning" ergibt die klassischen bernsteinfarbenen Sterne; das Standard-neutral ist im Light Mode schwarz und im Dark Mode weiß, und color nimmt jede CSS-Farbe. showValue gibt die Zahl über Intl aus („3.5“ in en-US, „3,5“ in de-DE) und reserviert die Breite der breitesten Zahl, sodass die Sterne nie verrutschen, während sich der Wert ändert.

Die Hover-Vorschau folgt dem Zeiger. Der Teil der Vorschau, der über den gewählten Wert hinausgeht, erscheint blasser, damit du die aktuelle Bewertung und die, die ein Klick setzen würde, gleichzeitig siehst. Nach einem Klick wartet die Vorschau, bis die Maus einen anderen Wert erreicht, damit das Ergebnis nicht unter einem stillstehenden Cursor verschwindet.

Was bekommen Tastatur- und Screenreader-Nutzer?

Die Reihe ist ein einziger Tab-Stopp mit role="slider", aria-valuemin, aria-valuemax, aria-valuenow und aria-valuetext. Die Tasten:

• Pfeil nach rechts oder oben erhöht um einen Schritt (0,5 mit allowHalf), Pfeil nach links oder unten verringert um einen. Auf Seiten mit Schreibrichtung von rechts nach links sind rechts und links vertauscht.
• PageUp und PageDown springen um einen ganzen Stern.
• Home löscht die Bewertung oder springt mit clearable={false} auf den niedrigsten Wert. End springt nach ganz oben.
• Ziffern 1 bis 9 wählen einen Wert direkt. 0, Backspace und Delete löschen.

Radio Groups sind das andere übliche Muster, und sie sind eine gute Wahl: MUI nutzt versteckte native Radios, @smastrom/react-rating eine ARIA Radio Group. Wir haben uns für einen Slider entschieden, weil halbe Schritte, Page-Tasten und Ziffern-Shortcuts auf einen einzigen Wert passen, und weil aria-valuetext jeden Wert als Wort ansagen kann. Ohne labels entscheidet getValueText, was vorgelesen wird (standardmäßig „3.5 of 5“); mit labels wird bei ganzen Werten das Label vorgelesen („Gut“). Übergib eine eigene Funktion, um den Text zu übersetzen.

Ein schreibgeschütztes Rating dient nur der Anzeige. Es bekommt role="img" und einen Namen aus getReadOnlyLabel („Rated 4.8 of 5“), ist nicht in der Tab-Reihenfolge und zeichnet Bruchteile wie 4,3 anteilig.

Wie funktioniert die Bewertung auf dem Smartphone?

Ein Finger kennt kein Hover, deshalb gibt es auf Touch-Geräten stattdessen ein Wischen. Drück auf die Sterne, zieh über sie und heb den Finger, um zu bestätigen; die Sterne folgen dem Finger, und touch-action: none auf der Reihe verhindert, dass die Seite beim Ziehen scrollt. Ziehst du den Finger vor den ersten Stern, wird die Bewertung gelöscht, wenn clearable an ist (der Standard).

Bei grobem Zeiger (Touch) wird jeder Stern zu einem 44px großen Ziel, und die Reihe verteilt ihre Icons in diesem Abstand. Wenn zehn Sterne über einen schmalen Bildschirm hinausragen würden, verkleinert die Reihe die Abstände zwischen ihnen, damit sie trotzdem passt, und die Zahl bleibt in derselben Zeile. Warum es genau 44px sind, steht in unserem Beitrag zur Mindestgröße von Touch-Zielen in React und Tailwind. Beim Loslassen ploppen die gefüllten Sterne nacheinander mit einer kleinen Spring-Animation auf. Ist in den Systemeinstellungen „Bewegung reduzieren“ aktiv, füllen sie sich ohne Animation.

Wie zeige ich Bewertungssterne und die Übersicht dazu an?

Sammle Bewertungen mit dem Rating und zeig sie mit der Reviews-Komponente an. Bewertungssterne auf einer Produktseite sind dasselbe Rating im schreibgeschützten Modus, eingebettet in eine Übersicht und eine Liste. Reviews nimmt die Liste der Bewertungen und eine summary mit Durchschnitt, Anzahl und der distribution als Anzahl für 5, 4, 3, 2 und 1 Sterne. Es rendert den Durchschnitt mit schreibgeschützten halben Sternen, fünf Balken, die die Liste beim Antippen filtern, ein Sortiermenü (auf dem Smartphone ein Bottom Sheet), Fotos, die sich im Vollbild öffnen, und „Hilfreich“-Stimmen, die zurückgesetzt werden, wenn das Speichern fehlschlägt.

import { Reviews, type ReviewData } from "@/components/ui/reviews";

export function ProductReviews({ reviews }: { reviews: ReviewData[] }) {
  return (
    <Reviews
      reviews={reviews}
      summary={{ average: 4.6, count: 126, distribution: [92, 21, 7, 3, 3] }}
      tone="warning"
      locale="de-DE"
      onHelpfulChange={async (id, helpful) => {
        const res = await fetch(`/api/reviews/${id}/helpful`, { method: helpful ? "POST" : "DELETE" });
        if (!res.ok) throw new Error("Stimme nicht gespeichert");
      }}
    />
  );
}

Gib summary vom Server mit, wenn die Liste seitenweise geladen wird. Ohne summary ruft Reviews summarizeRatings(reviews) auf, und diese Funktion sieht nur die geladene Seite: Für die Balken werden Bewertungen auf den nächsten ganzen Stern gerundet, und der Durchschnitt behält zwei Nachkommastellen. Die Teilkomponente ReviewsSummary rendert die Übersicht allein, für eine Händlerkarte oder einen Produkt-Header.

Tipp auf den Balken für 4 Sterne und tipp dann noch einmal darauf. Öffne das Sortiermenü und ein Foto aus einer Bewertung.

Wie erscheinen Bewertungssterne bei Google?

Über strukturierte Daten vom Typ AggregateRating auf der Seite; die Komponente selbst fügt keine hinzu. Googles Doku zu Review Snippets (opens in a new tab) verlangt ratingValue und mindestens ratingCount oder reviewCount, geht von 5 als bester und 1 als schlechtester Bewertung aus, wenn du diese Werte weglässt, und schließt Seiten aus, auf denen ein LocalBusiness oder eine Organization die Bewertungen über sich selbst steuert (Stand Oktober 2026). Dieselben Zahlen, die du an summary übergibst, füllen sie:

const jsonLd = {
  "@context": "https://schema.org",
  "@type": "Product",
  name: "Citybike",
  aggregateRating: { "@type": "AggregateRating", ratingValue: 4.6, reviewCount: 126 },
};

Wie du das im App Router sicher renderst, steht im Next.js JSON-LD Guide.

Was sind die typischen Fehler bei Sternebewertungen?

Fünf, und jeder lässt sich mit einer Prop oder den richtigen Zahlen vom Server beheben:

• Kein zugänglicher Name. Ein Rating ohne label braucht ein aria-label, sonst sagt ein Screenreader einen Slider ohne Namen an.
• Halbe Sterne mit Icons pro Wert. icons (ein Gesicht pro Wert, etwa Frown, Meh, Smile, Laugh) lässt immer nur ein Icon aufleuchten und ignoriert allowHalf. Nimm icon für halbe Sterne.
• Den Durchschnitt runden. Eine 4,4, als vier Sterne gezeichnet, unterschlägt echte Information. Nimm ein schreibgeschütztes Rating, das den Bruchteil zeichnet.
• Bei jedem Hover speichern. onValueChange wird nur beim Bestätigen ausgelöst: beim Loslassen nach einem Tippen oder Wischen und bei jedem Tastendruck. Speichere dort, nie in einem Pointer-Handler.
• Übersichten aus nur einer Seite. summarizeRatings auf der ersten Seite der Bewertungen ist nicht der Durchschnitt des Produkts. Schick die Gesamtwerte vom Server.

Wie füge ich es meinem Projekt hinzu?

Führ npx wingo-ui@latest add rating aus (oder reviews). Die CLI kopiert den Quellcode nach components/ui, ergänzt die Hooks und Helfer, die er importiert, und installiert motion und lucide-react. Rating und Reviews sind Pro-Komponenten (Preise); Textarea, Field und Button aus dem Formular oben sind kostenlos. Für den Rest des Formulars wendet der Guide zu React-Formularkomponenten dieselben Regeln für Tastatur, Touch und Fehler auf jedes Eingabefeld an, und in der Kategorie Komponenten-Guides findest du weitere Deep Dives zu einzelnen Komponenten.

Häufige Fragen

Wie baue ich eine Bewertung mit halben Sternen in React?

Teil jeden Stern in der Mitte: Ein Klick auf die linke Hälfte ergibt x,5, die rechte Hälfte einen ganzen Stern, und die Füllung ist dasselbe Icon, auf einen Prozentwert zugeschnitten. Im Rating von Wingo UI ist das die Prop allowHalf, mit der auch die Pfeiltasten in Schritten von 0,5 springen.

Sollte eine Sternebewertung eine Radio Group oder ein Slider sein?

Beides ist üblich. MUI Rating und @smastrom/react-rating bauen eine Radio Group, das Rating von Wingo UI ist ein einzelner Slider mit aria-valuetext, sodass ein Screenreader „Gut“ oder „3.5 of 5“ vorliest statt einer bloßen Zahl. Egal wofür du dich entscheidest: Gib jedem Wert ein Text-Label und lass den aktuellen Wert ansagen.

Wie zeige ich einen Durchschnitt wie 4,3 Sterne an?

Rendere das Rating schreibgeschützt und lass es den Bruchteil zeichnen. Ein schreibgeschütztes Rating von Wingo UI zeichnet 4,3 anteilig, zeigt die Zahl mit einer Nachkommastelle und wird als „Rated 4.3 of 5“ angesagt.

Kann Google meine Bewertungssterne in den Suchergebnissen zeigen?

Ja, wenn die Seite gültige strukturierte Daten vom Typ AggregateRating oder Review mit ratingValue und ratingCount oder reviewCount enthält. Seiten, auf denen ein LocalBusiness oder eine Organization sich selbst bewertet, kommen für die Sterne nicht in Frage.

Ist das Rating von Wingo UI kostenlos?

Nein. Rating und Reviews sind Pro-Komponenten. Field, Textarea und Button, die in diesem Guide dazu verwendet werden, sind kostenlos.