salla-rating-stars

Shows a five star rating, either as a read-only display of a score or as an input the customer clicks to pick a rating. Use the read-only form on product cards and review lists, and the editable form in review forms.

With a value and without editable, it displays that many filled stars (plus the review count when reviews is above 0). With no value, or with editable, it renders five buttons and a hidden input named by name, so the picked rating (1 to 5) is submitted with the surrounding form. In editable mode a given value is pre-selected until the customer picks one. The star buttons set aria-pressed on the chosen star. The text label is hidden from assistive technology while it is empty.

Use itCopy Anchor Link

In HTML or JSX, use the tag <salla-rating-stars> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).

import { SallaRatingStars } from '@salla.sa/twilight-components-react/rating-stars';

Client-only. On the server this wrapper renders a placeholder (a skeleton, or nothing), and the real component mounts in the browser. Do not rely on it for content that search engines must see.

Try itCopy Anchor Link

ExampleCopy Anchor Link

import { SallaRatingStars } from '@salla.sa/twilight-components-react/rating-stars';

export function Example() {
  return (
    <SallaRatingStars value={4} reviews={120} size="small" />
  );
}

import { SallaRatingStars } from '@salla.sa/twilight-components-react/rating-stars';

export function Example() {
  return (
    <form>
      <SallaRatingStars name="rating" withLabel />
    </form>
  );
}

PropertiesCopy Anchor Link

RelatedCopy Anchor Link

Used inside: <salla-comment-factors>, <salla-comment-item>, <salla-filters-widget>, <salla-rating-modal>, <salla-rating-modal-v2>, <salla-review-order-item>, <salla-reviews>, <salla-reviews-summary>.