דירוג כוכבים

קורא מסך שמקבל חמישה תווי כוכב מקריא חמישה סמלים ולא "4.3 מתוך 5", ולכן הכוכבים מסומנים aria-hidden ולידם טקסט אמיתי. הדירוג השבור נעשה בשכבה חתוכה באחוזים במקום חצי תו, והבחירה בנויה מ-radio אמיתיים, כך שחצים ו-Tab עובדים בלי שורת קוד. דירוג כוכבים הוא רכיב מתוך רכיבים של כליקס. מה שמורידים הוא רכיב שלם, גם כ-HTML עצמאי וגם כרכיב React. אין ספרייה חיצונית, אין שלב בנייה, ואם כליקס ייעלם מחר הקוד ימשיך לעבוד. מתאים לעמודים ולמסמכים שעוסקים בביקורות, טפסים ונגישות. באותה סדרה יש גם שאלות נפוצות, מחירון עם מתג והודעות צצות.

רכיב · ביקורות · טפסים · נגישות

<!-- דירוג כוכבים: לקריאה ולבחירה -->
<style>
  .klix-stars { display: inline-flex; align-items: center; gap: .5rem }
  .klix-stars-track { position: relative; display: inline-block; font-size: 1.25rem;
    line-height: 1; color: #475569 }
  .klix-stars-fill { position: absolute; inset-block: 0; inset-inline-start: 0;
    overflow: hidden; color: #fbbf24; white-space: nowrap }
  .klix-stars small { color: #94a3b8; font-size: .85rem }
  .klix-rate { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: .15rem;
    border: 0; padding: 0; margin: 0 }
  .klix-rate label { font-size: 1.5rem; color: #475569; cursor: pointer }
  .klix-rate input { position: absolute; width: 1px; height: 1px; opacity: 0 }
  .klix-rate input:checked ~ span,
  .klix-rate label:has(input:checked) { color: #fbbf24 }
  .klix-rate input:focus-visible + span { outline: 2px solid #818cf8; outline-offset: 2px }
</style>

<span class="klix-stars">
  <span class="klix-stars-track" aria-hidden="true">
    ★★★★★<span class="klix-stars-fill" style="width:86%">★★★★★</span>
  </span>
  <small>4.3 מתוך 5</small>
</span>

<fieldset class="klix-rate" id="klix-rate">
  <label><input type="radio" name="rating" value="5"><span>★</span></label>
  <label><input type="radio" name="rating" value="4"><span>★</span></label>
  <label><input type="radio" name="rating" value="3"><span>★</span></label>
  <label><input type="radio" name="rating" value="2"><span>★</span></label>
  <label><input type="radio" name="rating" value="1"><span>★</span></label>
</fieldset>

<script>
(function () {
  var box = document.getElementById('klix-rate');
  if (!box) return;

  box.addEventListener('change', function () {
    var picked = box.querySelector('input:checked');
    var value = picked ? Number(picked.value) : 0;
    // הכוכבים מסודרים הפוך ב-DOM, ולכן צובעים לפי הערך ולא לפי המיקום
    box.querySelectorAll('label').forEach(function (label) {
      var n = Number(label.querySelector('input').value);
      label.style.color = n <= value ? '#fbbf24' : '#475569';
    });
  });
})();
</script>