Rating

Rating renders a discrete star scale that can be displayed as a read-only value or used as an interactive input. Filled stars use the warning/amber token; empty stars retain a clear outline. Interactive ratings preview the full selection on pointer hover without committing it. Arrow keys, Home, and End adjust the value; touch interaction commits directly without hover.

#Default usage

<Rating aria-label="Product rating" defaultValue={4} max={5} readOnly />

#Import

import { Rating } from "@froggdesign/enter-ui-react";

#Controlled

#Accessibility

Interactive Rating uses role="slider" with aria-valuenow, aria-valuemin, and aria-valuemax. Read-only rating renders as role="img" with the numeric score included in its accessible name. Interactive ratings expose the score through aria-valuetext. Always provide aria-label describing what is being rated. Each star button carries a label like "3 stars" for screen readers.

#API

• value / defaultValue: current value (0–max).
• max: highest rating (default 5).
• onValueChange: fires when the value changes.
• readOnly: render as a static value display.
• disabled: prevent interaction without the read-only role.
• name: emit a hidden input for form submission.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.