Star Rating

The star rating is a component that allows users to provide feedback of a subject or experience by rating it between zero and five stars.

Key Points

• Stars are always displayed inline with a label underneath
• There should always be five stars shown
• Stars can be rated between empty or full values
• Like other form items they should be introduced with a label above

Usages

Star Ratings should be used inside of forms where you wish to capture a users feedback on a topic.

They should always be used with a clear label that proposes a question e.g. How would you rate this <custom value>?

Behaviour

Users can use either their keyboard or cursor to change their selections. Hovering the cursor selects the rating in full step increments. Clicking the correct icon and increment will confirm the selection.

On the keyboard, with the focus set on the field a user can use their left and right arrow keys to make a selection. Enter or tab out confirms the selection.