Peek Rating

Star rating that previews the score under the pointer: glyphs rise, the one you point at swells and a tip hops along above the row.

Default

Hover or drag across the glyphs to preview a score, then click to commit it. Click the current score again to clear it.

Value3

Count5

Shape

LabelsTip

Active

Idle

Tip

Tip Text

Size40px

Lift8px

Magnify1.15

Rise320ms

Pop1.3

Allow ClearRead Only

Prop	Type	Default	Description
`value`	`number`	`undefined`	Controlled rating from 0 to count, bound with v-model:value.
`defaultValue`	`number`	`0`	Initial rating when uncontrolled.
`count`	`number`	`5`	Number of glyphs.
`shape`	`'star' \| 'heart' \| 'bolt'`	`'star'`	Built-in glyph shape.
`labels`	`string[]`	`[]`	One label per glyph, shown in the tip while previewing. Without labels the tip shows the number.
`activeColor`	`string`	`'#f5b400'`	Colour of lit glyphs and of the focus ring.
`idleColor`	`string`	`'#52525b'`	Colour of unlit glyphs.
`tipColor`	`string`	`'#27272a'`	Background of the tip that follows the pointer.
`tipTextColor`	`string`	`'#f5f5f5'`	Text colour of the tip.
`size`	`number`	`28`	Glyph size in pixels. Spacing and the tip scale with it.
`lift`	`number`	`6`	How far previewed glyphs rise, in pixels. 0 makes the preview colour-only.
`magnify`	`number`	`1.15`	Scale of the glyph under the pointer.
`riseDuration`	`number`	`320`	Duration in milliseconds of each glyph's rise and fall, and of the tip's hop.
`popScale`	`number`	`1.3`	Peak scale of the pop on the committed glyph. 1 disables it.
`showTip`	`boolean`	`true`	Shows the tip above the pointer glyph while previewing.
`allowClear`	`boolean`	`true`	Clicking the current rating again, or Backspace, clears it to 0.
`readOnly`	`boolean`	`false`	Display only: no preview, no pop, announced as an image.
`disabled`	`boolean`	`false`	Dims the control and ignores input.
`ariaLabel`	`string`	`'Rating'`	Accessible name of the radio group.

Event	Description
`change`	Emitted with the committed rating, by click, release or keyboard.
`preview`	Emitted with the previewed rating on every slot crossing, and with null when the preview clears.
`update:value`	Emitted alongside change, for v-model:value.

Slot	Description
`icon`	Custom glyph that replaces the built-in shape. It inherits the lit and idle colour through currentColor.

Keyboard shortcuts and ARIA behavior.

Shortcut	Description
`Arrow Right` + `Arrow Up`	Raises the rating by one.
`Arrow Left` + `Arrow Down`	Lowers the rating by one.
`Home` + `End`	Jumps to 1 or to the maximum.
`Space` + `Enter`	Commits the focused glyph, or clears it when it is the current rating.
`Backspace` + `Delete`	Clears the rating when allowClear is on.

Rendered as a radiogroup of radio buttons with a roving tabindex. With readOnly it becomes an image announcing the score.
With prefers-reduced-motion the glyphs no longer rise and the pop is skipped.