Rating Mood Picker

Five slotted SVGs are assigned to the shapes in order. single-fill highlights only the chosen face, labels names each value for assistive technology, and valuechange mirrors the answer below the picker.

How was your support experience?

No answer

Code

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

<div class="mood-picker">
52 collapsed lines
  <p class="question">How was your support experience?</p>

  <sv-rating
    aria-label="Rate your support experience"
    labels="0:No answer, 1:Terrible, 2:Bad, 3:Okay, 4:Good, 5:Great"
    no-preview
    single-fill
    step="1"
    value="0"
  >
    <!-- Terrible -->
    <svg viewBox="0 0 24 24">
      <path
        d="M12 2a10 10 0 0 0 0 20 10 10 0 0 0 0-20ZM8.5 8.5a1.4 1.4 0 0 0 0 2.8 1.4 1.4 0 0 0 0-2.8Zm7 0a1.4 1.4 0 0 0 0 2.8 1.4 1.4 0 0 0 0-2.8ZM8 17.5q4-3.6 8 0l-1.2 1.4q-2.8-2.4-5.6 0Z"
        fill-rule="evenodd"
      />
    </svg>

    <!-- Bad -->
    <svg viewBox="0 0 24 24">
      <path
        d="M12 2a10 10 0 0 0 0 20 10 10 0 0 0 0-20ZM8.5 8.5a1.4 1.4 0 0 0 0 2.8 1.4 1.4 0 0 0 0-2.8Zm7 0a1.4 1.4 0 0 0 0 2.8 1.4 1.4 0 0 0 0-2.8Zm-6.9 8.3q3.4-2.4 6.8 0l-1 1.3q-2.4-1.6-4.8 0Z"
        fill-rule="evenodd"
      />
    </svg>

    <!-- Okay -->
    <svg viewBox="0 0 24 24">
      <path
        d="M12 2a10 10 0 0 0 0 20 10 10 0 0 0 0-20ZM8.5 8.5a1.4 1.4 0 0 0 0 2.8 1.4 1.4 0 0 0 0-2.8Zm7 0a1.4 1.4 0 0 0 0 2.8 1.4 1.4 0 0 0 0-2.8Zm-7 7.3h7v1.6h-7Z"
        fill-rule="evenodd"
      />
    </svg>

    <!-- Good -->
    <svg viewBox="0 0 24 24">
      <path
        d="M12 2a10 10 0 0 0 0 20 10 10 0 0 0 0-20ZM8.5 8.5a1.4 1.4 0 0 0 0 2.8 1.4 1.4 0 0 0 0-2.8Zm7 0a1.4 1.4 0 0 0 0 2.8 1.4 1.4 0 0 0 0-2.8ZM8 14.6q4 3.6 8 0l-1.2-1.4q-2.8 2.4-5.6 0Z"
        fill-rule="evenodd"
      />
    </svg>

    <!-- Great -->
    <svg viewBox="0 0 24 24">
      <path
        d="M12 2a10 10 0 0 0 0 20 10 10 0 0 0 0-20ZM8.5 8.5a1.4 1.4 0 0 0 0 2.8 1.4 1.4 0 0 0 0-2.8Zm7 0a1.4 1.4 0 0 0 0 2.8 1.4 1.4 0 0 0 0-2.8Zm-8 5.1a4.5 4.5 0 0 0 9 0Z"
        fill-rule="evenodd"
      />
    </svg>
  </sv-rating>

  <p class="answer">No answer</p>
</div>

<script type="application/x-typescript" module>
6 collapsed lines
  const rating = document.querySelector<Rating>(".mood-picker sv-rating")!;
  const answer = document.querySelector(".mood-picker .answer")!;

  rating.addEventListener("valuechange", () => {
    answer.textContent = rating.labels[rating.value];
  });
</script>

<style>
49 collapsed lines
  .mood-picker {
    display: grid;
    gap: 0.75em;
    justify-items: center;
    padding-block: 1em;

    p {
      margin: 0;
    }

    .question {
      font-weight: 600;
    }

    .answer {
      font-size: 0.9em;
      color: var(--sv-gray-3);
    }

    sv-rating {
      --sv-rating-shape-sz: 3em;
      --sv-rating-bdr-clr: transparent;

      &::part(foreground-svg-1) {
        fill: #ef4444;
        stroke: none;
      }

      &::part(foreground-svg-2) {
        fill: #f97316;
        stroke: none;
      }

      &::part(foreground-svg-3) {
        fill: #f59e0b;
        stroke: none;
      }

      &::part(foreground-svg-4) {
        fill: #84cc16;
        stroke: none;
      }

      &::part(foreground-svg-5) {
        fill: #22c55e;
        stroke: none;
      }
    }
  }
</style>