Rating Stars Input — Free HTML CSS JS Star Rating Picker

<div class="rs-card">
  <p class="rs-q">How was your experience?</p>
  <div class="rs-stars" id="rsStars" role="radiogroup" aria-label="Rating">
    <button type="button" class="rs-star" role="radio" aria-label="1 star" data-v="1" aria-checked="false"><svg viewBox="0 0 24 24"><path d="M12 2l2.9 6.3 6.9.7-5.2 4.6 1.5 6.8L12 17.5 5.9 20.4l1.5-6.8L2.2 9l6.9-.7z"/></svg></button>
    <button type="button" class="rs-star" role="radio" aria-label="2 stars" data-v="2" aria-checked="false"><svg viewBox="0 0 24 24"><path d="M12 2l2.9 6.3 6.9.7-5.2 4.6 1.5 6.8L12 17.5 5.9 20.4l1.5-6.8L2.2 9l6.9-.7z"/></svg></button>
    <button type="button" class="rs-star" role="radio" aria-label="3 stars" data-v="3" aria-checked="false"><svg viewBox="0 0 24 24"><path d="M12 2l2.9 6.3 6.9.7-5.2 4.6 1.5 6.8L12 17.5 5.9 20.4l1.5-6.8L2.2 9l6.9-.7z"/></svg></button>
    <button type="button" class="rs-star" role="radio" aria-label="4 stars" data-v="4" aria-checked="false"><svg viewBox="0 0 24 24"><path d="M12 2l2.9 6.3 6.9.7-5.2 4.6 1.5 6.8L12 17.5 5.9 20.4l1.5-6.8L2.2 9l6.9-.7z"/></svg></button>
    <button type="button" class="rs-star" role="radio" aria-label="5 stars" data-v="5" aria-checked="false"><svg viewBox="0 0 24 24"><path d="M12 2l2.9 6.3 6.9.7-5.2 4.6 1.5 6.8L12 17.5 5.9 20.4l1.5-6.8L2.2 9l6.9-.7z"/></svg></button>
  </div>
  <p class="rs-out" id="rsOut">Tap a star to rate</p>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0d0f18;display:flex;justify-content:center;align-items:center;min-height:100vh;padding:24px}

.rs-card{background:#151926;border:1px solid #232838;border-radius:18px;padding:28px 30px;text-align:center;width:320px}
.rs-q{color:#e7eaf3;font-size:17px;font-weight:600;margin-bottom:18px}
.rs-stars{display:inline-flex;gap:6px}
.rs-star{background:none;border:0;padding:4px;cursor:pointer;line-height:0}
.rs-star svg{width:38px;height:38px;fill:#2a3145;stroke:#3a4258;stroke-width:1;transition:fill .12s,transform .12s}
.rs-star:hover{transform:scale(1.12)}
/* Fill this star and all before it when active or hovered. */
.rs-star.is-on svg{fill:#fbbf24;stroke:#f59e0b}
.rs-star.is-hover svg{fill:#fde68a;stroke:#fbbf24}
.rs-star:focus-visible{outline:2px solid #6366f1;outline-offset:3px;border-radius:8px}
.rs-out{color:#8b93a8;font-size:14px;margin-top:18px;min-height:20px}
.rs-out strong{color:#fbbf24}

var wrap = document.getElementById('rsStars');
var out = document.getElementById('rsOut');
var stars = Array.prototype.slice.call(wrap.querySelectorAll('.rs-star'));
var LABELS = ['', 'Terrible', 'Poor', 'Okay', 'Good', 'Excellent'];
var rating = 0;

// Light up every star up to and including n, using the given class.
function paint(n, cls) {
  stars.forEach(function (s, i) {
    s.classList.toggle(cls, i < n);
  });
}

function setRating(n) {
  rating = n;
  stars.forEach(function (s, i) {
    var on = i < n;
    s.classList.toggle('is-on', on);
    s.setAttribute('aria-checked', i === n - 1 ? 'true' : 'false');
  });
  out.innerHTML = 'You rated: <strong>' + n + '/5 · ' + LABELS[n] + '</strong>';
}

stars.forEach(function (star, i) {
  var n = i + 1;
  star.addEventListener('mouseenter', function () { paint(n, 'is-hover'); });
  star.addEventListener('click', function () { setRating(n); });
  // Keyboard: arrows move, Enter/Space commit.
  star.addEventListener('keydown', function (e) {
    if (e.key === 'ArrowRight' || e.key === 'ArrowUp') { stars[Math.min(i + 1, 4)].focus(); e.preventDefault(); }
    if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') { stars[Math.max(i - 1, 0)].focus(); e.preventDefault(); }
    if (e.key === 'Enter' || e.key === ' ') { setRating(n); e.preventDefault(); }
  });
});

// Clear the hover preview, leaving the committed rating shown.
wrap.addEventListener('mouseleave', function () { paint(0, 'is-hover'); });