Component size, gzipped: 17kb

Rating

API

Emoji ratings are to be used to collect a user’s experience in the form of an emotional ranking. Like star ratings, there five options.

Star ratings are to be used to collect feedback from a user’s experience with a product. The stars indicate a performance rating from one to five.

Accessibility

This component uses the [role="radiogroup"] attribute with the following attributes for each individual rating item:

  • [role="radio"]
  • [tabindex=0]
  • [aria-setsize=5] - total number of elements within the Rating
  • [aria-checked] - if the rating is active
  • [aria-posinset] - position within the Rating

Examples

Rating with stars

Rating with emoticons

API

Rating props

NameTypeDescription
numItems
The total number of items to display.
onChange
Callback that's called with the newly selected value.
overrides
Lets you customize all aspects of the component.
value
The current rating value.

Rating exports

You can import this module like so:

import {StarRating} from 'baseui/rating'

It exports the following components or utility functions: