Star-based value selector with read-only and interactive modes, keyboard support, and accessible semantics.
Rating renders a discrete star scale that can be displayed as a read-only value or used as an interactive input. Interactive ratings respond to arrow keys, Home, and End for keyboard adjustments.
Display a captured rating without interaction.
<Rating aria-label="Product rating" defaultValue={4} max={5} readOnly />import { Rating } from "@froggdesign/enter-ui-react";Click a star or use arrow keys to change the value.
Interactive Rating uses role="slider" with aria-valuenow, aria-valuemin, and aria-valuemax. Read-only rating renders as role="img". Always provide aria-label describing what is being rated. Each star button carries a label like "3 stars" for screen readers.
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.Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.