Bootstrap Star Rating Input — Free HTML CSS JS Snippet

<div class="container py-5 d-flex justify-content-center">
  <div class="card bsstar-card">
    <div class="card-body p-4 text-center">
      <h5 class="fw-bold mb-1">Rate your experience</h5>
      <p class="text-muted small mb-3">Click a star, or use the arrow keys.</p>

      <div class="d-flex justify-content-center gap-1 mb-2" id="bsstarGroup" role="radiogroup" aria-label="Star rating" tabindex="0">
        <span class="bsstar" data-value="1" role="radio" aria-checked="false">&#9733;</span>
        <span class="bsstar" data-value="2" role="radio" aria-checked="false">&#9733;</span>
        <span class="bsstar" data-value="3" role="radio" aria-checked="false">&#9733;</span>
        <span class="bsstar" data-value="4" role="radio" aria-checked="false">&#9733;</span>
        <span class="bsstar" data-value="5" role="radio" aria-checked="false">&#9733;</span>
      </div>

      <p class="small text-muted mb-3" id="bsstarLabel">No rating yet</p>
      <input type="hidden" id="bsstarValue" name="rating" value="0">
      <button class="btn btn-dark w-100 fw-bold" id="bsstarSubmit" disabled>Submit rating</button>
      <p class="small mt-3 mb-0" id="bsstarStatus">&nbsp;</p>
    </div>
  </div>
</div>

.bsstar-card { width: 380px; border: 1px solid #eceef1; border-radius: 14px; }
.bsstar { font-size: 34px; line-height: 1; color: #d8dbe0; cursor: pointer; transition: color .1s ease, transform .1s ease; user-select: none; }
.bsstar.bsstar-filled { color: #f5a623; }
.bsstar:hover { transform: scale(1.12); }
#bsstarGroup:focus-visible { outline: 2px solid #0d6efd; outline-offset: 6px; border-radius: 8px; }

const stars = Array.from(document.querySelectorAll('.bsstar'));
const group = document.getElementById('bsstarGroup');
const label = document.getElementById('bsstarLabel');
const hiddenInput = document.getElementById('bsstarValue');
const submitBtn = document.getElementById('bsstarSubmit');
const status = document.getElementById('bsstarStatus');

let committed = 0;

function paint(upTo) {
  stars.forEach(s => {
    s.classList.toggle('bsstar-filled', Number(s.dataset.value) <= upTo);
  });
}

function setLabel(value) {
  label.textContent = value > 0 ? value + ' out of 5' : 'No rating yet';
}

function commit(value) {
  committed = value;
  hiddenInput.value = String(value);
  setLabel(value);
  paint(value);
  submitBtn.disabled = value === 0;
  stars.forEach(s => s.setAttribute('aria-checked', String(Number(s.dataset.value) === value)));
}

stars.forEach(star => {
  star.addEventListener('mouseenter', () => paint(Number(star.dataset.value)));
  star.addEventListener('mouseleave', () => paint(committed));
  star.addEventListener('click', () => commit(Number(star.dataset.value)));
});

// Keyboard support: the star row itself is focusable (tabindex="0") and acts
// as a single radiogroup, so arrow keys move the committed rating up or down
// by one star without needing to tab through five separate elements.
group.addEventListener('keydown', e => {
  if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {
    e.preventDefault();
    commit(Math.min(5, committed + 1));
  } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {
    e.preventDefault();
    commit(Math.max(0, committed - 1));
  } else if (e.key >= '1' && e.key <= '5') {
    commit(Number(e.key));
  }
});

submitBtn.addEventListener('click', () => {
  status.textContent = 'Thanks! You rated ' + committed + ' out of 5.';
  status.className = 'small mt-3 mb-0 text-success';
});