Star rate
A star rating whose stars lift in a wave up to the pointer, name the score above it and pop when one is chosen.
- enhancer
- rating
- stars
- pointer
- keyboard
- form
- since 0.2
Background Studio: tune it below, then copy the code
Your system asks for reduced motion: the demo shows its final state and nothing moves.
Live demo
Star rate example
Code
It follows the controls above: change an option and the code changes with it.
<script src="https://search.axi0.io/axi0/motion/motion.js" defer></script>
<div class="m-sr-demo"><label for="m-sr-stay">How was your stay?</label><input id="m-sr-stay" type="range" min="0" max="5" step="1" value="4" data-motion="star-rate"></div>import { StarRate } from "./motion/react/StarRate";
<StarRate>Your content</StarRate><script setup lang="ts">
import StarRate from "./motion/vue/StarRate.vue";
</script>
<template>
<StarRate>Your content</StarRate>
</template>const el = document.querySelector("#title");
el.dataset.motion = "star-rate";The wrappers: StarRate.tsx (React, TypeScript) and StarRate.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.
Options
| Attribute | Default | What it does |
|---|---|---|
data-motion-color | #f6a04d | Star color |
data-motion-size | 40 | Star size |
data-motion-words | Poor,Fair,Good,Great,Superb | One word per star, shown above the star the pointer is on (comma separated) |
data-motion-tip | true | Show the word above the stars |
Accessibility
The range input stays the control: it keeps its label, takes focus and changes with the arrow keys, Home and End, and it announces "4 of 5, Great" through aria-valuetext. The stars are drawn beside it and aria-hidden; a focus ring goes round them while the input has keyboard focus, and the word shows above the chosen star. Touch: drag along the row to preview, lift to choose; vertical swipes still scroll the page. Only transform, opacity and paint change, so nothing around it moves. Frames run through the shared loop, which stops off screen, in hidden tabs and under reduced motion; reduced motion shows the final state with no movement.
Size
star-rate.js is 2.5 KB gzip. A page loads the loader (2.9 KB) and core.js (1.4 KB) once, whatever it uses.