Rating

クリックやキーボード操作で評価値を設定できる星評価コンポーネントです。レビューやフィードバックの表示・入力に使用します。

Basic

jui-rating の最も基本的な使用例です。クリックで評価値を変更できます。

Half Star

allow-half を有効にすると、0.5 刻みの精度で評価できます。

Colors

color プロパティで星の色を変更できます。

Sizes

size プロパティでサイズを変更できます。

Readonly

readonly を設定すると、表示のみで操作できなくなります。レビュー表示に最適です。

Disabled

disabled で操作不可にできます。

Custom Max

max-value プロパティで星の最大数を変更できます。

アクセシビリティ

• WAI-ARIA:
  • インタラクティブモードでは role="slider" を設定します。
  • aria-valuenow、aria-valuemin、aria-valuemax で現在値と範囲を通知します。
  • label プロパティで aria-label を設定できます（デフォルト: 「評価」）。
  • 無効状態は aria-disabled、読み取り専用は aria-readonly で通知されます。
• キーボードナビゲーション:
  • ← / ↓: 値を1ステップ（半分星有効時は0.5）減少
  • → / ↑: 値を1ステップ増加
  • Home: 0に設定
  • End: 最大値に設定
• マウス操作:
  • 同じ値を再クリックすると0にリセットされます。
  • allow-half 有効時、星の左半分をクリックで0.5刻み評価が可能です。

CSS カスタムプロパティ

このコンポーネント固有のカスタムプロパティはありません。グローバルのデザイントークン（--jui-color-brand, --jui-color-warning 等）を参照して描画されます。

ブラウザ対応

このコンポーネントが使用しているブラウザ機能と対応状況です。

機能	用途	Chrome	Firefox	Safari	ステータス
SVG clipPath	半分星の描画	1+	1.5+	3+	Baseline
CSS 変数 (var())	デザイントークン・カラー適用	49+	31+	9.1+	Baseline 2017

💡 いずれの機能も主要ブラウザで広く対応済みです。

関連コンポーネント

• Slider — 数値の範囲選択
• Input — テキスト入力コンポーネント
• Form Field — フォームフィールドラッパー

プロパティ

コンポーネントが受け付ける属性（Props）の一覧と詳細仕様です。

Property	Attribute	Description	Type	Default
allowHalf	allow-half	半分星を許可	boolean	false
color	color	星の色	"brand" | "warning"	'warning'
disabled	disabled	無効状態	boolean	false
label	label	アクセシビリティラベル	string	''
maxValue	max-value	最大星数	number	5
name	name	フォーム識別用の name 属性	string	undefined
readonly	readonly	読み取り専用	boolean	false
size	size	サイズ	"lg" | "md" | "sm"	'md'
value	value	現在の評価値	number	0

イベント

コンポーネントから発火するカスタムイベントの一覧です。

Event	Description	Type
juiChange	値が変更された時	CustomEvent<{ value: number; previousValue: number; }>

シャドウパーツ

CSSから直接スタイリング可能な内部要素（Parts）の一覧です。

Part	Description
"label"	ラベル要素
"star"	各星要素
"star-filled"	塗りつぶし済みの星要素

---

Built with StencilJS