Skip to component
GGamma

Rating input

Five named native radio choices with cumulative stars and an explicit unrated state.

New

Component review

How useful is this pattern?

Choose a rating for the task you are working on.

Not rated

Live previewUse keyboard to interact

Implementation

1"use client";2 3import { useId, useState, type FieldsetHTMLAttributes } from "react";4import { Star } from "lucide-react";5 6export type RatingInputProps = Omit<7  FieldsetHTMLAttributes<HTMLFieldSetElement>,8  "onChange" | "children"9> & {10  label: string;11  description?: string;12  value?: number;13  defaultValue?: number;14  onChange?: (value: number) => void;15  labels?: [string, string, string, string, string];16  required?: boolean;17};18 19/** Five named native radios, with a cumulative star display. Zero means unrated. */20export function RatingInput({21  label,22  description,23  value,24  defaultValue = 0,25  onChange,26  labels = ["Poor", "Fair", "Good", "Very good", "Excellent"],27  required = false,28  disabled = false,