Rating lets people view and set a value that reflects a degree of satisfaction, typically on a scale such as one to five stars.
Figma
The Figma reference for Rating will appear here once the design link is added.
Storybook
Interactive examples for Rating will render here once the Storybook link is wired in.
Best practices
- Provide a clear, visible label describing what is being rated.
- Choose a sensible precision — whole stars for most cases, halves only when the extra granularity is meaningful.
- Use the read-only state to display an existing rating that shouldn’t be changed.
- Show a disabled state when rating isn’t currently available.
Accessibility
- Each rating exposes an accessible name for its value so assistive technology can announce the current selection.
- The control is operable with the keyboard: arrow keys change the value when it’s interactive.