Input · Rating
Rating
Ratings provide insight regarding others’ opinions and experiences with a product.

Demos

How to import

Basic Usage

Support two sizes: default, small.
Supports customized size if pass in a number. Refer to Customize

Half Star

Use allowHalf to support selection of half stars. Support to display decimals ratings other than 0.5.

Disabled

Use disabled to disabled interaction.

Click to Clear

allowClear Property allows you to clear the value when you click on the component again. By default it is set to true.

Text Description

Use tooltips to add description to Rating.

Customize

You can customize characters, numbers of rating and size.
v >= 0.35.0 Note that customized size could only work with customized characters.

API Reference

PropertiesInstructionstypeDefault
allowClearToggle whether it is allowed to clear when clickingbooleantrue
allowHalfToggle whether it is allowed to select half starsbooleanfalse
autoFocusAutomatically focusbooleanfalse
characterCustom characters to display ratingReact Node<IconStar size="extra-large"/>
classNameClass namestring-
countNumber of stars or charactersnumber5
defaultValueDefault valuenumber0
disabledRead-only, disable interaction.booleanfalse
preventScrollIndicates whether the browser should scroll the document to display the newly focused element, acting on the focus method inside the component, excluding the component passed in by the userboolean
sizeSize, one of default, small, v >= 0.35.0 could use number for customized sizestring| numberdefault
styleInline styleobject-
tooltipsCustomize prompted information for each itemString[]-
valueControlled valuenumber-
onBlurCallback function when losing focus.function()-
onChangeCallback function at the time of selectionfunction(value: number)-
onFocusCallback function when getting focusfunction()-
onHoverChangeCallback function of numerical changes when the mouse hoversfunction(value: number)-
onKeyDownCallback function when key downfunction(e: event)-

Accessibility

ARIA

  • Rating has aria-checked to indicate whether it is currently selected, aria-posinset to indicate the position in the list, and aria-setsize to indicate the length of the list.
  • Semi supports custom Rating semantics
    • Users can use aria-label to customize the semantics of Rating;
    • If the type of character passed in by the user is string, this string will be used for the semantics of Rating;
    • aria-label has higher priority than string type character.

Keyboard and Focus

  • Initial focus settings for Rating:
    • If there is a selection item in Rating, the initial focus should be set to the last selection item (for example: if 3 🌟 are lit, the initial focus is set on the third lit 🌟);
    • If there is no option for Rating, the initial focus should be on the entire Rating.
  • On a Rating group, you can use the right arrow or up arrow to select the next focus item of the current focus, and the left arrow or down arrow to select the previous focus item of the current focus;
    • The user sets the allowHalf property, and presses the arrow keys to select or deselect only half a star;
  • A disabled Rating cannot get the focus.

Design Tokens