Skip to content

StarRating

Status: Stable

Latest released: 2018

Current version: v3.8.0

Storybook
GitHub

Displays a visual rating of a product, including a NerdWallet-specific rating. StarRatingInput allows users to interactively rate.


Variants

Default

NerdWallet

Interactive

Select your rating

Disabled

It’s OK

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.

{
[key]: string
} | bool