Skip to content

StarRating

Status: Stable

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

Examples

Default

NerdWallet

Interactive

Select your rating

Disabled

It’s OK

Props

<StarRating>

aria-label

string
Text to be used for assistive technology (like screen readers) to better inform users what this rating represents. Defaults to the provided rating label or `rated ${rating} out of ${maxRating}`, but can be overridden here.

className

Deprecated
string
Class on the outer container element.

label

string
Label for the stars.

maxRating

number
Maximum star rating.

nerdwallet

boolean
Whether this is a "NerdWallet" rating, making the stars green.

rating

number

ref

(instance: any) => void | RefObject<any>