OOratiq

Rating

Ready

Star rating, display and input.

Installation

$ npx @oratiq-js/ui add rating

Copies the component and everything it depends on into your project, then lists the npm packages to install. The code is yours after this.

Usage

import
import { Rating } from "@/components/ui/rating";

Input and display

Accessibility

  • Input mode is a radiogroup — one tab stop, arrows move between stars.
  • Arrow keys follow the writing direction: the arrow pointing toward 'more stars' increases in both LTR and RTL.
  • Display mode is role=img with a spoken '4 of 5' label — decorative stars stay silent.

Props

PropTypeDefaultDescription
maxnumber5Number of stars.
readOnlybooleanfalseDisplay-only, no interaction.
size"sm" | "default" | "lg""default"Star size.

View source on GitHub → components/ui/rating.tsx