Rating

import { Rating } from '@elirobinson/react/components/molecules/Rating';

import { Rating } from '@elirobinson/react/components/molecules/Rating';

export default function Basic() {
  return (
    <div className="demo-col">
      <div className="demo-row">
        <span>Weeknight Pasta</span>
        <Rating value={4} />
      </div>
      <div className="demo-row">
        <span>U10 Practice Plan</span>
        <Rating value={5} />
      </div>
      <div className="demo-row">
        <span>Sheet-Pan Dinners</span>
        <Rating value={3} />
      </div>
    </div>
  );
}

When to use it

Rating switches its own mode based on whether you pass onValueChange: omit it and you get a read-only star display for showing an existing score (a recipe card, a testimonial); pass it and the stars become interactive buttons for collecting one. You don't choose the mode explicitly — the prop you pass decides it.

Interactive

import { useState } from 'react';

import { Rating } from '@elirobinson/react/components/molecules/Rating';

export default function Interactive() {
  const [value, setValue] = useState(0);

  return (
    <div className="demo-col">
      <Rating value={value} onValueChange={setValue} />
      <p>
        {value > 0 ? `You rated this recipe ${value} out of 5.` : 'Tap a star to rate this recipe.'}
      </p>
    </div>
  );
}

Props

Accessibility

• Read-only mode (no onValueChange): renders role="img" on the outer element with aria-label="{value} out of {max} stars" — a screen reader hears the whole rating as one static image-like value, not a list of individual stars.
• Interactive mode (onValueChange passed): each star is a native <button type="button"> with aria-label="Rate {n} out of {max} stars" and aria-pressed reflecting whether that star is filled.
• value is clamped to the 0–max range before it's used in the accessible label, so an out-of-range value (negative, or above max) never produces a nonsensical announcement.
• Keyboard: in interactive mode, each star button is independently focusable — Tab moves star to star, Enter and Space activate whichever one has focus. There's no arrow-key traversal between stars; this is a row of buttons, not a slider.
• Star buttons follow dense inline sizing (MUI/shadcn scale), not the 44px primary-control minimum.
• The ref forwards to the outer element in both modes.

Related