Vibeset

Peeking rating

A 1 to 5 score with no context is a number; with the word it is an opinion. Passing over an icon lifts it and a word like "Good" peeks out above it. It is a real radio group: each icon carries its score in its name ("4 of 5: Good"), only one sits in the tab order and the arrow keys move the score. It supports averages: in read-only mode the value can be 4.3 and the last star fills 30 %, by clipping one copy over another, because rounding to 4 lies in a decimal that matters. The label is a single one that travels between icons, and it also shows with keyboard focus.

And the React Bits original: Peek Rating

This piece is written from scratch in Vibeset: nothing was copied or ported from React Bits. It does something similar to their Peek Rating, and this is what we saw in theirs in case you prefer to use the original.

When to use it

To ask for a 1 to 5 score in a friendly way, or to show the average of something in read-only mode.

Watch out for

Showing an average nobody voted for is inventing data. In readOnly mode use real figures or do not show it.

Accessibility

Nine aria signals, keyboard, read-only mode and reduced motion (six references in the code).