Skip to content
staticview

Rating Basic

Use rating attributes and child SVGs to customize behavior and shapes.








Code

The following example assumes that you have imported the component and set up the theme.

Rating
<div class="rating-container">
  <label>
    Rating Normal
    <sv-rating value="2.5"></sv-rating>
  </label>
</div>


<br />


<div class="rating-container">
  <label>
    Rating No Preview
    <sv-rating no-preview value="2.5"></sv-rating>
  </label>
</div>


<br />


<div class="rating-container">
  <label>
    Rating Reversed
    <sv-rating reversed value="2.5"></sv-rating>
  </label>
</div>


<br />


<div class="rating-container">
  <label>
    Rating Disabled
    <sv-rating disabled value="2.5"></sv-rating>
  </label>
</div>


<br />


<div class="rating-container">
  <label>
    Rating Readonly
    <sv-rating readonly value="2.5"></sv-rating>
  </label>
</div>


<br />


<div class="rating-container">
  <label>
    Rating Custom Shape
    <sv-rating class="hearts" value="2.5">
5 collapsed lines
      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path
          d="m12 5.72c-2.624-4.517-10-3.198-10 2.461 0 3.725 4.345 7.727 9.303 12.54.194.189.446.283.697.283s.503-.094.697-.283c4.977-4.831 9.303-8.814 9.303-12.54 0-5.678-7.396-6.944-10-2.461z"
        ></path>
      </svg>
    </sv-rating>
  </label>
</div>


<br />


<div class="rating-container">
  <label>
    Rating Step 0.25
    <sv-rating step="0.25" value="2.5"></sv-rating>
  </label>
</div>


<br />


<div class="rating-container">
  <label>
    Rating Discrete
    <sv-rating
      class="custom-shapes"
      labels="0:No rating, 1:Sad, 2:Dissatisfied, 3:Neutral, 4:Satisfied, 5:Happy"
      no-preview
      solo
      step="1"
      value="3"
    >
      <!-- Sad -->
5 collapsed lines
      <svg viewBox="0 -960 960 960" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M250-320h60v-10q0-71 49.5-120.5T480-500q71 0 120.5 49.5T650-330v10h60v-10q0-96-67-163t-163-67q-96 0-163 67t-67 163v10Zm34-270q41-6 86.5-32t72.5-59l-46-38q-20 24-55.5 44T276-650l8 60Zm392 0 8-60q-30-5-65.5-25T563-719l-46 38q27 33 72.5 59t86.5 32ZM324-111.5Q251-143 197-197t-85.5-127Q80-397 80-480t31.5-156Q143-709 197-763t127-85.5Q397-880 480-880t156 31.5Q709-817 763-763t85.5 127Q880-563 880-480t-31.5 156Q817-251 763-197t-127 85.5Q563-80 480-80t-156-31.5ZM480-480Zm227 227q93-93 93-227t-93-227q-93-93-227-93t-227 93q-93 93-93 227t93 227q93 93 227 93t227-93Z"
        ></path>
      </svg>


      <!-- Dissatisfied -->
5 collapsed lines
      <svg viewBox="0 -960 960 960" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M620-520q25 0 42.5-17.5T680-580q0-25-17.5-42.5T620-640q-25 0-42.5 17.5T560-580q0 25 17.5 42.5T620-520Zm-280 0q25 0 42.5-17.5T400-580q0-25-17.5-42.5T340-640q-25 0-42.5 17.5T280-580q0 25 17.5 42.5T340-520Zm16.5 138.5Q301-343 276-280h66q22-37 58.5-58.5T480-360q43 0 79.5 21.5T618-280h66q-25-63-80.5-101.5T480-420q-68 0-123.5 38.5Zm-32.5 270Q251-143 197-197t-85.5-127Q80-397 80-480t31.5-156Q143-709 197-763t127-85.5Q397-880 480-880t156 31.5Q709-817 763-763t85.5 127Q880-563 880-480t-31.5 156Q817-251 763-197t-127 85.5Q563-80 480-80t-156-31.5ZM480-480Zm227 227q93-93 93-227t-93-227q-93-93-227-93t-227 93q-93 93-93 227t93 227q93 93 227 93t227-93Z"
        ></path>
      </svg>


      <!-- Neutral -->
5 collapsed lines
      <svg viewBox="0 -960 960 960" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M620-520q25 0 42.5-17.5T680-580q0-25-17.5-42.5T620-640q-25 0-42.5 17.5T560-580q0 25 17.5 42.5T620-520Zm-280 0q25 0 42.5-17.5T400-580q0-25-17.5-42.5T340-640q-25 0-42.5 17.5T280-580q0 25 17.5 42.5T340-520Zm20 180h240v-60H360v60Zm-36 228.5Q251-143 197-197t-85.5-127Q80-397 80-480t31.5-156Q143-709 197-763t127-85.5Q397-880 480-880t156 31.5Q709-817 763-763t85.5 127Q880-563 880-480t-31.5 156Q817-251 763-197t-127 85.5Q563-80 480-80t-156-31.5ZM480-480Zm227 227q93-93 93-227t-93-227q-93-93-227-93t-227 93q-93 93-93 227t93 227q93 93 227 93t227-93Z"
        ></path>
      </svg>


      <!-- Satisfied -->
5 collapsed lines
      <svg viewBox="0 -960 960 960" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M620-520q25 0 42.5-17.5T680-580q0-25-17.5-42.5T620-640q-25 0-42.5 17.5T560-580q0 25 17.5 42.5T620-520Zm-280 0q25 0 42.5-17.5T400-580q0-25-17.5-42.5T340-640q-25 0-42.5 17.5T280-580q0 25 17.5 42.5T340-520Zm263.5 221.5Q659-337 684-400h-66q-22 37-58.5 58.5T480-320q-43 0-79.5-21.5T342-400h-66q25 63 80.5 101.5T480-260q68 0 123.5-38.5ZM324-111.5Q251-143 197-197t-85.5-127Q80-397 80-480t31.5-156Q143-709 197-763t127-85.5Q397-880 480-880t156 31.5Q709-817 763-763t85.5 127Q880-563 880-480t-31.5 156Q817-251 763-197t-127 85.5Q563-80 480-80t-156-31.5ZM480-480Zm227 227q93-93 93-227t-93-227q-93-93-227-93t-227 93q-93 93-93 227t93 227q93 93 227 93t227-93Z"
        ></path>
      </svg>


      <!-- Happy -->
5 collapsed lines
      <svg viewBox="0 -960 960 960" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M320-480v80q0 66 47 113t113 47q66 0 113-47t47-113v-80H320Zm160 180q-42 0-71-29t-29-71v-20h200v20q0 42-29 71t-71 29ZM272.5-652.5Q243-625 231-577l58 14q6-26 20-41.5t31-15.5q17 0 31 15.5t20 41.5l58-14q-12-48-41.5-75.5T340-680q-38 0-67.5 27.5Zm280 0Q523-625 511-577l58 14q6-26 20-41.5t31-15.5q17 0 31 15.5t20 41.5l58-14q-12-48-41.5-75.5T620-680q-38 0-67.5 27.5ZM324-111.5Q251-143 197-197t-85.5-127Q80-397 80-480t31.5-156Q143-709 197-763t127-85.5Q397-880 480-880t156 31.5Q709-817 763-763t85.5 127Q880-563 880-480t-31.5 156Q817-251 763-197t-127 85.5Q563-80 480-80t-156-31.5ZM480-480Zm227 227q93-93 93-227t-93-227q-93-93-227-93t-227 93q-93 93-93 227t93 227q93 93 227 93t227-93Z"
        ></path>
      </svg>
    </sv-rating>
  </label>
</div>


<style>
  .rating-container {
    display: flex;


    label {
      line-height: 3;
    }


    sv-rating {
      --sv-accent: gold;
    }


    .hearts {
      --sv-accent: red;
    }


    .custom-shapes {
      --sv-bdr-sz-md: 0;
      --sv-shape-size: 3em;
      --sv-gray-6: var(--sv-gray-5);


      &::part(foreground-svg-1),
      &::part(foreground-svg-2) {
        fill: red;
      }


      &::part(foreground-svg-3) {
        fill: #969600;
      }


      &::part(foreground-svg-4),
      &::part(foreground-svg-5) {
        fill: green;
      }
    }
  }
</style>