Frontend

Rate

You might say

Let people rate the product with stars.

Express a rating with stars or ordered levelsA rating control lets people show satisfaction on an ordered scale, often with five stars. Pair the graphic with a readable number or label, and make sure keyboard and screen-reader users can select a value too.

★★★★★Half stars · 3.5 ★★★★★4.8Read-only display

Anatomy

★★★★★ 4 stars · Satisfied

Usually five icons; both the count and icon can vary

Filled icons show the selected rating; outlines show the rest. Half-star ratings are also possible.

The score and what it means, such as “4 stars · Satisfied.”

Variants

Default

★★★★★

Use a five-star scale to show satisfaction

Half Star

★★★★★3.5

When you need half-star precision

Readonly

★★★★★4.8

Show a read-only overall rating

Custom Icon

♥♥♥♥♥

Use an icon such as a heart when it better fits the brand.

Typical use cases

Product review

Wireless Bluetooth headset

Transaction successful · July 18

Product evaluation ★★★★★ Satisfied

Support survey

Introduction to front-end · HTML Lesson 1

★★★★★4.8

Rating methodology and sample size

"The steps and prerequisite knowledge are clearly explained" —— Evaluation example

Course feedback

Are you satisfied with this service?

Support agent Mia · Conversation ended

★★★★★

Very satisfied

Content rating

Hill Coffee·Nanshan Store ★★★★★3.5

The review summary and sample size should indicate the source