Displays a visual rating of a product, including a NerdWallet-specific rating. StarRatingInput
allows users to interactively rate.
Variants
Default
NerdWallet
Interactive
Disabled
Development
import StarRating from '@nerdwallet/react-star-rating';<StarRating />;
Props
<StarRating>
aria-label
string
Text to be used for assistive technology (like screen readers) to better guide users to what the context of this element means to the webpage. Defaults to the passed in rating label, then `rated ${rating} out of ${maxRating}`, but can be overriden here.
className
string
Class on the outer container element.
label
string
Label for the stars.
maxRating
= 5
number
Maximum star rating.
nerdwallet
boolean
Whether this is a "NerdWallet" rating, making the stars green.
rating
= 0
number
Current star rating.
ratingLabels
= DEFAULT_RATING_LABELS
Object | boolean
Object mapping each rating value to its label or a flag indicating to hide the rating labels.