Rating input
Five named native radio choices with cumulative stars and an explicit unrated state.
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,