<k-rating></k-rating>

<k-rating value="3"></k-rating>

<k-rating id="movieRating"></k-rating>
<p>You rated: <span id="output">0</span> / 5</p>
<button id="setFive">Set 5</button>
<button id="clearRating">Clear</button>
<script>
  const $rating = document.getElementById('movieRating');
  const $output = document.getElementById('output');
  $rating.addEventListener('change', (event) => {
    $output.textContent = event.detail.value;
  });
  document.getElementById('setFive').addEventListener('click', () => {
    $rating.value = 5;
  });
  document.getElementById('clearRating').addEventListener('click', () => {
    $rating.value = 0;
  });
</script>

You rated: 0 / 5

<form id="reviewForm">
  <label>Rate this product:</label>
  <k-rating name="rating" value="3"></k-rating>
  <div class="mt">
    <button type="submit" class="mr">Submit</button>
    <button type="reset">Reset</button>
  </div>
</form>
<p>Submitted: <span id="result"></span></p>
<script>
  document.getElementById('reviewForm').addEventListener('submit', (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    document.getElementById('result').textContent = formData.get('rating');
  });
</script>

Submitted:

<k-rating disabled value="4"></k-rating>

<k-rating
  value="4"
  style="
    --star_size: 2.5rem;
    --star_color: var(--c_border);
    --star_color__filled: var(--c_danger);
    --star_gap: 0.5rem;
  "
></k-rating>