Edit this page
[?] Component size, gzipped: 27kb

Rating

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

Overrides

Additionally, you can fully customize any part of the Rating through the overrides prop. The Rating consists of multiple subcomponents that are listed bellow and you can override each one of them. To help you identify the names of these subcomponents, you can highlight them through this selector:

Note: You should always use longhand CSS properties. Mixing shorthands and longhands will lead into strange behaviors!

API

Star Rating API

overrides object = {}

Root { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Item { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*

value number

The current rating value.

numItems number = 5

The total number of items to display.

onChange function

Callback that's called with the newly selected value.

value number required
=> mixed

Emotion Rating API

overrides object = {}

Root { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Item { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*

value number

The current rating value.

onChange function

Callback that's called with the newly selected value.

value number required
=> mixed

Rating exports

You can import this module like so:

import {StarRating} from 'baseui/rating'

It exports the following components or utility functions:

  • StarRating
  • EmoticonRating
  • StyledRoot
  • StyledStar
  • StyledEmoticon