4.32.2

Star Rating

A star rating component

Demo

const rating = document.getElementById('my-rating'); document.addEventListener("s-change", function(e) { if( e.detail.value > 0){ rating.classList.remove('error'); } else{ rating.classList.add('error'); } });

API

Tag

Name	Description
`<s-star-rating>`	Custom Element to show rating stars.

Attributes

Name	Value	Required	Description
`inputid`	string		The name to assign to the radio inputs that make up the star ratings.
`rating`	0 to 5		The number of stars to select.
`i18n`	string		A stringified JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.

Properties

Name	Value	Required	Description
`inputId`	string		Set in the `s-change` event's `inputId`field
`rating`	0 to 5		The number of stars to select.
`i18n`	object		A JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.

Demo

API

Tag

Name	Description
`<SStarRating>`	Custom Element to show rating stars.

Props

Name	Value	Required	Description
`rating`	rating value		The number of stars to select.
`i18n`	object		A JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.

Skylab React links

General information about using our React package

i18n Strings

ID	Description	Default value
`starrating.star1`	Rating text for 1 star rating	Very dissatisfied
`starrating.star2`	Rating text for 2 star rating	Dissatisfied
`starrating.star3`	Rating text for 3 star rating	Neutral
`starrating.star4`	Rating text for 4 star rating	Satisfied
`starrating.star5`	Rating text for 5 star rating	Very satisfied

Design

Design resources can be found on the Skylab design documentation site: skylab.avalara.com