What it does
Provide a polished rating primitive with animated fill clipping, hover previews, keyboard stepping, and the same appearance system used across Zentauri UI components.
The component keeps the visual icon row separate from the radio options so half-step values stay accessible while the display remains compact.
Composition and API
Import Rating from the rating entrypoint. Use value and onValueChange for controlled state, or defaultValue for uncontrolled state. Tune the control with max, allowHalf, allowClear, readOnly, disabled, name, size, appearance, icon, getLabel, hint, and errorMessage.
Common use cases
Use Rating anywhere a product surface needs compact sentiment input or a read-only quality signal. It fits product reviews, post-support satisfaction prompts, survey questions, testimonial cards, marketplace summaries, and admin dashboards that compare customer feedback across teams or releases.
Accessibility
Rating renders a role=radiogroup wrapper with individual role=radio options. Provide label text, use hint for helper copy, and customize getLabel when your scoring language needs more context than the default numeric value.
Next.js integration notes
Use Rating in client components when the selected value changes in the browser. Read-only aggregate displays can be rendered from server data, while interactive feedback forms should submit the hidden input or controlled value to your own server action or API route.
FAQ
Can Rating collect half-star values?
Yes. Pass allowHalf to expose half-step radio options and keep the fill clipped to the selected fractional value.
Can I use icons other than stars?
Yes. Use the built-in star, heart, flame, and thumb presets, or pass any react-icons component through the icon prop.
Does Rating work in forms?
Yes. Pass name to render a hidden input with the current numeric rating value.