Rating

A rating lets users give a value to an item by selecting one of a row of stars. It supports half-filled stars, four sizes and a custom number of items.

Usage

<script>
	import { Rating } from 'fluentui-svelte';

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

<Rating bind:value />

Bind the value

Use bind:value to read the rating the user picks.

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

<Rating bind:value />
<p>{value}</p>

Half stars

Set step to 0.5 to let users pick half-filled stars.

<Rating value={2.5} step={0.5} />

Quarter stars

Until the user rates, a fractional value is drawn in quarters, which is handy to show an average. Once the user picks a star, the rating snaps to the step.

<Rating value={3.75} />

Size

Use size to choose between small, medium, large and extra-large.

<Rating value={3} size="small" />
<Rating value={3} size="medium" />
<Rating value={3} size="large" />
<Rating value={3} size="extra-large" />

Shape

Use iconFilled and iconOutline to replace the stars with any other icon component. Both fall back to the star when omitted, and partially filled items are clipped, so custom shapes also work with a step of 0.5.

<script>
  import { HeartFilled, HeartRegular, BookmarkFilled, BookmarkRegular } from 'fluentui-icons-svelte';
</script>

<Rating value={3} iconFilled={HeartFilled} iconOutline={HeartRegular} />
<Rating value={2.5} step={0.5} iconFilled={BookmarkFilled} iconOutline={BookmarkRegular} />

Max

Use max to change the number of stars.

<Rating value={4} max={10} />

Item label

Use itemLabel to customize the accessible label of each radio input.

<Rating value={3} itemLabel={(rating) => `${rating} out of 5 stars`} />

Component Props