Rating Review Form

The rating is form-associated: name puts its value in the form data like any built-in input. Reset restores the value from the markup.

Code

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

<form class="review-form">
10 collapsed lines
  <sv-rating aria-label="Your rating" name="rating" value="4"></sv-rating>

  <textarea aria-label="Your review" name="comment" placeholder="What did you like or dislike?" rows="3"></textarea>

  <div class="actions">
    <button type="submit">Submit</button>
    <button type="reset">Reset</button>
  </div>

  <p class="submitted" hidden></p>
</form>

<script type="application/x-typescript" module>
10 collapsed lines
  const form = document.querySelector<HTMLFormElement>(".review-form")!;
  const submitted = form.querySelector<HTMLElement>(".submitted")!;

  form.addEventListener("submit", event => {
    event.preventDefault();

    const data = new FormData(form);
    submitted.hidden = false;
    submitted.textContent = `Submitted ${data.get("rating")} stars: "${data.get("comment")}"`;
  });
</script>

<style>
53 collapsed lines
  .review-form {
    display: grid;
    gap: 1em;
    max-inline-size: 24rem;
    padding: clamp(1rem, 4vw, 2rem);
    margin-inline: auto;
    background-color: var(--sv-gray-7);
    border: 1px solid var(--sv-gray-5);
    border-radius: var(--sv-bdr-rad-lg);

    sv-rating {
      justify-self: start;
    }

    textarea {
      padding: 0.5em 0.7em;
      font: inherit;
      color: var(--sv-gray-1);
      resize: vertical;
      background-color: var(--sv-gray-6);
      border: 1px solid var(--sv-gray-5);
      border-radius: var(--sv-bdr-rad-md);
    }

    .actions {
      display: flex;
      gap: 0.5em;

      button {
        padding: 0.3em 1.2em;
        font: inherit;
        cursor: pointer;
        border: none;
        border-radius: var(--sv-bdr-rad-md);
      }

      [type="submit"] {
        color: var(--sv-gray-7);
        background-color: var(--sv-accent);
      }

      [type="reset"] {
        color: var(--sv-gray-2);
        background-color: var(--sv-gray-5);
      }
    }

    .submitted {
      margin: 0;
      font-size: 0.85em;
      color: var(--sv-gray-3);
    }
  }
</style>