Rating
评分
Aliases:点星星评分五颗星评价满意度打分star rating
What is it
An input for a bounded subjective score, often represented by stars or labeled satisfaction levels. Hover previews a value; pointer or keyboard selection commits it. Give each level a text meaning, distinguish no rating from the lowest score, and label read-only averages and their sample counts clearly.
Interactive playground
Try it. Make an informed choice.Preview with hover, choose with pointer or keyboard, then move away to verify the committed score before submitting.
Loading lab…
What to look for
- 01Hover is temporary; leaving restores the selected score.
- 02An unset value is distinct from a score; submission gives feedback.
✓ When to use
- Collect satisfaction after a service or product experience.
- Gather lightweight feedback with defined score levels.
✕ When not to use
- Add text feedback when reasons matter.
- Use numeric input for precise quantities or measurements.
Variants
Stars
星级评分
Five stars with labeled score levels.
Sentiment
感受评分
Use expressive symbols to indicate satisfaction.
Implementation
:checked:focus-visibletransform: scale()Use same-name radios for one score. Label each value and keep hover preview separate from the committed score. Disable submission before selection and respect reduced motion. Do not use interactive roles for read-only ratings.
Related concepts
A set of circular buttons for mutually exclusive options — exactly one selected per group, never unset. The core contrast with checkboxes is single versus multi selection; the dot fills with animation on select, and with 2–5 options a visible radio group beats a dropdown.
ComponentsSimilarA draggable handle on a track picks a value from a continuous range, with the number and filled track following in real time. Ideal for magnitudes like volume, brightness or price ranges — more intuitive than a text box; supports tick marks, steps and a dual-handle range form.
ComponentsSimilarA clickable block that triggers one clear action — the most basic interactive element of any interface. Fill, outline and ghost styles rank primary against secondary actions; presses give instant sink-in feedback, and a busy state disables further clicks to prevent double submission.
ComponentsSimilar