レーティング

hc-rating は星評価をラジオグループとして描画します: 各星は本物の <input type="radio"> と <label> のグリフです。値はフォームと一緒に ネイティブにシリアライズされ、矢印キーでのグループ内ナビゲーションは プラットフォームが提供し、チェック位置までのフィルは純 CSS (:has()、Baseline 2023)です — JavaScript はありません。

別名: 星評価、スター評価。

ブラウザのベースライン

プリミティブ	状況
:has()(チェック位置までのフィル、ホバープレビュー)	Baseline 2023

:has() がなくても劣化するのは視覚的な「そこまで塗る」表現だけです — 隣接兄弟のルールがチェックされた(またはホバー中の)星そのものは塗り、 ラジオは完全に機能するシリアライズ可能なフォームコントロールのまま で、読み取り専用表示(data-filled の span)はそもそも :has() を 使いません。

基本の HTML

星ごとに input + label のペアを 1 組、昇順の DOM 順で置きます。 グループには視覚的に隠した <legend> で名前を付けます。

PreviewCode

Rate this article

★★★★★

<fieldset class="hc-rating">
  <legend class="hc-sr-only">Rate this article</legend>
  <input class="hc-rating__input" type="radio" name="rate" value="1" id="r1">
  <label class="hc-rating__star" for="r1" aria-label="1 of 5">★</label>
  <input class="hc-rating__input" type="radio" name="rate" value="2" id="r2">
  <label class="hc-rating__star" for="r2" aria-label="2 of 5">★</label>
  <!-- … up to value="5" -->
</fieldset>

グリフはラベルの内容で、currentColor を継承します — CSS に触れずに ★ を任意の文字やインライン SVG に差し替えられます。

読み取り専用の表示

既存の評価の表示(レビューリスト、商品カード)ではフォームを丸ごと 省きます: data-filled つきの span と、コンテナ上の 1 つの アクセシブルな名前です。

PreviewCode

★★★★★

<span class="hc-rating" data-readonly role="img" aria-label="4 of 5 stars">
  <span class="hc-rating__star" data-filled aria-hidden="true">★</span>
  <span class="hc-rating__star" data-filled aria-hidden="true">★</span>
  <span class="hc-rating__star" data-filled aria-hidden="true">★</span>
  <span class="hc-rating__star" data-filled aria-hidden="true">★</span>
  <span class="hc-rating__star" aria-hidden="true">★</span>
</span>

サイズ

data-size は sm、md(デフォルト)、lg を受け付けます。

PreviewCode

★★★★★★★★★★★★★★★

<span class="hc-rating" data-readonly data-size="sm"
      role="img" aria-label="3 of 5 stars">…</span>
<span class="hc-rating" data-readonly
      role="img" aria-label="3 of 5 stars">…</span>
<span class="hc-rating" data-readonly data-size="lg"
      role="img" aria-label="3 of 5 stars">…</span>

htmx での利用

レーティングは通常のラジオグループです — 任意のフォームコントロールと 同じように送信するか、変更時に保存します:

<form data-hx-post="/reviews/42/rate" data-hx-trigger="change"
      data-hx-target="#rate-status" data-hx-swap="innerHTML">
  <fieldset class="hc-rating">
    <legend class="hc-sr-only">Rate this article</legend>
    <!-- … the radios … -->
  </fieldset>
</form>
<p id="rate-status" role="status"></p>

サーバは標準のフォームエンコーディングで rate=4 を受け取ります — カスタムのシリアライズも hidden input も不要です。

アクセシビリティ

• グループに名前を: インタラクティブな形では <legend>(視覚的に隠して 可)、読み取り専用の形ではコンテナに role="img" + aria-label。
• 各星のラベルに aria-label(「1 of 5」…)を与えてください — さもないと見える ★ グリフが「黒い星」と 5 回読み上げられます。
• ラジオは視覚的に隠れていますがツリーには残ります: Tab でグループに 到達し、矢印キーで中を移動し、フォーカスされた星にはリングが 表示されます。
• 無効化されたグループ(<fieldset disabled>)は星をミュートし、 ネイティブに入力をブロックします。
• 半分の星の値はラジオグループでは表現できません — 表示では整数の星に 丸め、正確な値は aria-label(と見えるテキスト)に載せてください: aria-label="4.5 of 5 stars"。

テーマ用トークン

component トークン(component.tokens.json):

トークンパス	用途
rating.gap	星の間のギャップ。
rating.size	グリフのサイズ(デフォルト)。
rating.color	空の星の色。
rating.filled-color	塗られた星の色(warning / アンバー)。
rating.transition-duration	フィル色のトランジション。
rating.sm.size / lg.size	サイズバリアント。

CSS 変数

生成される CSS 変数を表示

--hc-rating-gap | -size | -color | -filled-color
--hc-rating-transition-duration
--hc-rating-sm-size | -lg-size
--hc-color-focus-ring   (inherited from data-color)

関連

• ラジオ — 土台となる コントロールの素の形。
• バッジ — レビュー リストで読み取り専用レーティングと組み合わせます。