这叫啥 UI？
← 返回组件目录

COMPONENT 85 · Selection & Values

评分控件

Rating

也叫Star Rating星级评分打分

用一组有序等级表达主观评价。

Express a subjective assessment on an ordered scale.

ANATOMY & USAGE

结构与使用建议

组成部分

  • 评分题目
  • 星级选项
  • 评分结果

适合使用

  • 表达满意度、质量评价或体验反馈。

不建议使用

  • 精确测量数值时使用数字输入，不应把评分当作连续滑块。

键盘与无障碍

  • 使用原生单选组，方向键切换、每颗星具备明确读音。
  • 用 4 / 5 等文字表达结果，悬停预览不改变提交值。

参考 Fluent 2 · Rating ↗核对于 2026-09-05

DESCRIBE IT TO AI

这样告诉编程助手

实现评分控件（Rating）：用一组有序等级表达主观评价。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <section class="modern-demo">
      <fieldset class="modern-rating">
        <legend>这次体验怎么样？</legend>
        <div>
          <label
            ><input type="radio" name="rating" value="1" aria-label="1 星" /><span
              aria-hidden="true"
              >★</span
            ></label
          ><label
            ><input type="radio" name="rating" value="2" aria-label="2 星" /><span
              aria-hidden="true"
              >★</span
            ></label
          ><label
            ><input type="radio" name="rating" value="3" aria-label="3 星" /><span
              aria-hidden="true"
              >★</span
            ></label
          ><label
            ><input type="radio" name="rating" value="4" aria-label="4 星" /><span
              aria-hidden="true"
              >★</span
            ></label
          ><label
            ><input type="radio" name="rating" value="5" aria-label="5 星" /><span
              aria-hidden="true"
              >★</span
            ></label
          >
        </div>
      </fieldset>
      <p id="status" role="status">选择 1 至 5 星评分</p>
      <button id="reset">清除评分</button>
    </section>
    <script src="script.js" defer></script>
  </body>
</html>