Rating Component

Overview

A star rating with two modes. Display (default): average is a 0–10 score (TMDB-style), rendered as 5 stars with halves; count is the number of ratings. Interactive (below): a form control you can click/keyboard to set a value.

★★★★☆

4.3 (1240)

★★★★★

5.0 (512)

★★★☆☆

2.5 (88)

★★☆☆☆

1.5 (17)

☆☆☆☆☆

0.0 (0)

import { Rating } from '@spaethtech/svelte-ui';

<!-- average is 0–10; rendered as 5 stars (average / 2) -->
<Rating average={8.6} count={1240} />  <!-- 4.3 -->
<Rating average={10} count={512} />    <!-- 5.0 -->
<Rating average={5} count={88} />      <!-- 2.5 -->
<Rating average={3} count={17} />      <!-- 1.5 -->
<Rating average={0} count={0} />       <!-- 0.0 -->

Interactive

Pass interactive and bind:value to let the user pick a rating — click a star, hover to preview, or focus and use ←/→ (Home/End). Add allowHalf for half-star precision.

★★★☆☆

3.0

value = 3

★★★★☆

3.5

half-steps · value = 3.5

★★★★☆

disabled

<script>
  let value = $state(3);
</script>

<!-- click / hover / arrow-key to select -->
<Rating interactive bind:value />

<!-- half-star precision + a variant tint -->
<Rating interactive allowHalf bind:value variant="warning" />

Variants

★★★★★

4.5 (100)

neutral

★★★★★

4.5 (100)

primary

★★★★★

4.5 (100)

secondary

★★★★★

4.5 (100)

success

★★★★★

4.5 (100)

info

★★★★★

4.5 (100)

warning

★★★★★

4.5 (100)

danger

★★★★★

4.5 (100)

ghost

variant tints the filled stars (default gold).

<Rating average={9} count={100} variant="neutral" />
<Rating average={9} count={100} variant="primary" />
<Rating average={9} count={100} variant="secondary" />
<Rating average={9} count={100} variant="success" />
<Rating average={9} count={100} variant="info" />
<Rating average={9} count={100} variant="warning" />
<Rating average={9} count={100} variant="danger" />
<Rating average={9} count={100} variant="ghost" />

Sizes

★★★★★

4.5 (100)

★★★★★

4.5 (100)

★★★★★

4.5 (100)

<Rating average={9} count={100} size="sm" />
<Rating average={9} count={100} size="md" />
<Rating average={9} count={100} size="lg" />

In context

Product rating

★★★★★

4.5 (127)

Service quality

★★★★☆

3.7 (56)

<Rating average={9.0} count={127} />
<Rating average={7.4} count={56} />