# React Rating Stars: Halbe Sterne, Hover und Tastatur > Bau React Rating Stars mit halben Sternen, Hover-Vorschau, Tastatur und Touch, schreibgeschützten Durchschnittswerten und der passenden Review-Übersicht. - Autor: [Serban Rusu](https://wingo-ui.com/blog/authors/serban), Founder of Wingo UI - Veröffentlicht: 19. Okt. 2026 - Kategorie: [Komponenten-Guides](https://wingo-ui.com/de/blog/category/components) - Lesezeit: 9 Min. - Kanonische URL: https://wingo-ui.com/de/blog/react-rating-stars - Englische Fassung: https://wingo-ui.com/blog/react-rating-stars ## Kurz gesagt Gute React Rating Stars brauchen über eine Reihe Icons hinaus vier Dinge: halbe Werte je nach Position des Zeigers, eine Hover-Vorschau, die zeigt, was ein Klick bewirkt, volle Bedienung per Tastatur mit gesprochenem Wert und ein Wischen per Finger mit 44px großen Zielen. Das Rating von Wingo UI deckt das mit allowHalf, labels und einem kontrollierten value ab, und die Reviews-Komponente macht aus den gespeicherten Bewertungen einen Durchschnitt, eine Verteilung von 5 bis 1 und eine filterbare Liste. 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](https://wingo-ui.com/components/rating) und [Reviews](https://wingo-ui.com/components/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. | Option | Was es ist | Halbe Werte | Tastatur und Screenreader | Zuletzt veröffentlicht | |---|---|---|---|---| | [MUI Rating](https://mui.com/material-ui/react-rating/) | Teil von `@mui/material` (MIT) | `precision={0.5}` | Visuell versteckte Radio-Inputs, eins pro Stern plus 0; Pfeiltasten ändern den Wert | `@mui/material` 9.5.0, Oktober 2026 | | [@smastrom/react-rating](https://github.com/smastrom/react-rating) | Paket ohne Abhängigkeiten (MIT) | Schreibgeschützte Kommazahlen, auf den nächsten halben Stern gezeichnet | ARIA Radio Group; Pfeiltasten bewegen, Enter oder Leertaste bestätigt | 1.5.0, Januar 2024 | | [react-rating-stars-component](https://github.com/ertanhasani/react-stars) | Fork von react-stars (ISC) | `isHalf`, standardmäßig an | Prop `a11y`, standardmäßig an: Pfeiltasten und Zifferntasten | 2.2.0, Juli 2020 | | [Wingo UI Rating](https://wingo-ui.com/components/rating) | Pro-Komponente als Quellcode, `npx wingo-ui@latest add rating` | `allowHalf`, nach Position des Zeigers und in Tastenschritten von 0,5 | Ein Slider mit `aria-valuetext`, Pfeiltasten, Page-Tasten, Home, End und Ziffern; Wischen per Finger mit 44px großen Zielen | Teil der Library | 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. ```bash npx wingo-ui@latest add rating textarea button ``` ```tsx "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 }) { const [rating, setRating] = useState(0); const [tried, setTried] = useState(false); return (
{ // das versteckte Input-Feld sendet "0", solange nichts gewählt ist if (Number(data.get("rating")) === 0) { setTried(true); return; } await saveReview(data); }} > { 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} />