Controlled

Hover to preview, click to set, or focus and use the arrow keys, Home, End, or a digit.

Half steps

Left half of an item sets the half, right half the whole. Arrow keys move by 0.5.

Sizes

Custom icon

Same behavior, any filled icon. Color comes from the --rating-color variable.

Per-item icon

Each position has its own icon. Lit ones show in color, the rest recede.

Custom color

A token, never a hex: set --rating-color on the root.

Label, disabled and read only

Render function

renderItem draws each item from its state: here a numbered chip.

Product review form

A sample form: overall in half steps with a word beside it, three small ratings, an error in words if you skip the overall.