# salla-rating-stars (https://docs.salla.dev/twilight/react/web-components/salla-rating-stars)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

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 it [#use-it]

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

```tsx
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 it [#try-it]

<Demo name="web-components/salla-rating-stars" />

## Example [#example]

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

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

```html
<salla-rating-stars value="4" reviews="120" size="small"></salla-rating-stars>
```

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

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

```html
<form>
  <salla-rating-stars name="rating" with-label></salla-rating-stars>
</form>
```

## Properties [#properties]

| Property           | Attribute            | Description                                                                                                                                                                | Type                                       | Default    |
| ------------------ | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | ---------- |
| `editable`         | `editable`           | Makes the rating an input the customer can click. Without it, the stars are read-only whenever `value` is set.                                                             | `boolean`                                  | `false`    |
| `labelBeforeStars` | `label-before-stars` | Places the description label before the stars instead of after. Only has an effect together with `with-label`.                                                             | `boolean`                                  | `false`    |
| `name`             | `name`               | Name of the hidden input that holds the picked rating (1 to 5) in the editable form.                                                                                       | `string`                                   | `'rating'` |
| `reviews`          | `reviews`            | Number of reviews shown in brackets after the stars. Nothing is shown when it is 0. Only used in read-only mode.                                                           | `number`                                   | `0`        |
| `size`             | `size`               | Size of the stars: `large`, `medium`, `small` or `mini`. It is added as a CSS class (`s-rating-stars-<size>`) on each star.                                                | `"large" \| "medium" \| "mini" \| "small"` | `'medium'` |
| `tag`              | `tag`                | Only switches the CSS class of the text label between `s-rating-stars-label` (true) and `s-rating-stars-label-without-tag` (false), so a theme can style them differently. | `boolean`                                  | `true`     |
| `value`            | `value`              | The rating, from 1 to 5. In read-only mode this many stars are filled. With `editable` it is the pre-selected rating. Also picks the text label when `with-label` is set.  | `number`                                   |            |
| `withLabel`        | `with-label`         | Shows a text label (such as poor, good or excellent) for the current or hovered rating.                                                                                    | `boolean`                                  |            |

## Related [#related]

Used inside: [`<salla-comment-factors>`](https://docs.salla.dev/twilight/react/web-components/salla-comment-factors), [`<salla-comment-item>`](https://docs.salla.dev/twilight/react/web-components/salla-comment-item), [`<salla-filters-widget>`](https://docs.salla.dev/twilight/react/web-components/salla-filters-widget), [`<salla-rating-modal>`](https://docs.salla.dev/twilight/react/web-components/salla-rating-modal), [`<salla-rating-modal-v2>`](https://docs.salla.dev/twilight/react/web-components/salla-rating-modal-v2), [`<salla-review-order-item>`](https://docs.salla.dev/twilight/react/web-components/salla-review-order-item), [`<salla-reviews>`](https://docs.salla.dev/twilight/react/web-components/salla-reviews), [`<salla-reviews-summary>`](https://docs.salla.dev/twilight/react/web-components/salla-reviews-summary).