StarRating

An input element used for rating with a number of stars.

Showcase

Source 
<script>
  let restaurantRating = 1;
</script>

<StarRating name="restaurant" bind:value={restaurantRating} />
<br>
<StarRating name="hotel" value={5} max={7} disabled>
  <span slot="icon"><ThumbsUpIcon size="24" /></span>
</StarRating>

Properties #

Functional Properties

Name
Default
Type
Description
name * string The name to assign to all stars belonging to the same group. Check MDN docs for more information.
max 5 number How many stars to be displayed.
value null number Current amount of selected stars.
disabled false boolean Disables star selection.
events [] Array List of handlers for the Events action: [{ name, handler }]. The event listeners are registered on the <input type="radio"> elements.
... any Everything else will be passed to the underlying <input type="radio"> elements.
* Required

Class Properties

All <StarRating> components use the .star-rating class.

Falsy values passed to classes will be disregarded.

Name
Default
Type
Description
class null string A class string to add to the component.
starClass null string A class string to assign to the <label> element containing the star icon.

Events #

Name
Event Detail
Description
change { value, nativeEvent } Fired when the selection changes. The value contains the number of selected stars and nativeEvent has the native change event.

Slots #

icon slot

The icon to use as the star. Defaults to Feather icons' Star.

SCSS Variables #

Name
Description
Default
$main Affects the hover and background colors of the component and the fill color of the selected stars.
#4300B0
$off-state The color of the unselected label.
#AAAAAA
$disabled The color of the icon when the input is disabled.
#888888