Rating

A star rating input where users click or drag across a row of icons to pick a score, with keyboard control and support for half-star or other fractional values.

@delego

byappica-dev

Controlled rating with feedback labels preview

import { Rating } from "@/components/ui/rating";
import { useState } from "react";

const LABELS = ["Terrible", "Poor", "Average", "Good", "Excellent"];

export default function RatingFeedback() {
  const [value, setValue] = useState(0);
  const [preview, setPreview] = useState<number | null>(null);
  const shown = preview ?? value;

  return (
    <div className="flex flex-col items-center gap-2">
      <span
        id="feedback-label"
        className="text-foreground-intense text-sm font-medium"
      >
        How was your experience?
      </span>
      <Rating
        value={value}
        onValueChange={setValue}
        onHoverChange={setPreview}
        clearable
        size={32}
        aria-labelledby="feedback-label"
      />
      <span className="text-foreground-muted h-5 text-sm">
        {shown > 0 ? LABELS[Math.ceil(shown) - 1] : ""}
      </span>
    </div>
  );
}