Rating

Ratings give users a way to quickly view and provide feedback.

<wa-rating label="Rating"></wa-rating>

Examples Jump to heading #

Labels Jump to heading #

Ratings are commonly identified contextually, so labels aren't displayed. However, you should always provide one for assistive devices using the label attribute.

<wa-rating label="Rate this component"></wa-rating>

Maximum Value Jump to heading #

Ratings are 0-5 by default. To change the maximum possible value, use the max attribute.

<wa-rating label="Rating" max="3"></wa-rating>

Precision Jump to heading #

Use the precision attribute to let users select fractional ratings.

<wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>

Symbol Sizes Jump to heading #

Set the --symbol-size custom property to adjust the size.

<wa-rating label="Rating" style="--symbol-size: 2rem;"></wa-rating>

Readonly Jump to heading #

Use the readonly attribute to display a rating that users can't change.

<wa-rating label="Rating" readonly value="3"></wa-rating>

Disabled Jump to heading #

Use the disabled attribute to disable the rating.

<wa-rating label="Rating" disabled value="3"></wa-rating>

Detecting Hover Jump to heading #

Use the wa-hover event to detect when the user hovers over (or touch and drag) the rating. This lets you hook into values as the user interacts with the rating, but before they select a value.

The event has a payload with phase and value properties. The phase property tells when hovering starts, moves to a new value, and ends. The value property tells what the rating's value would be if the user were to commit to the hovered value.

<div class="detect-hover">
  <wa-rating label="Rating"></wa-rating>
  <span></span>
</div>

<script>
  const rating = document.querySelector('.detect-hover > wa-rating');
  const span = rating.nextElementSibling;
  const terms = ['No rating', 'Terrible', 'Bad', 'OK', 'Good', 'Excellent'];

  rating.addEventListener('wa-hover', event => {
    span.textContent = terms[event.detail.value];

    // Clear feedback when hovering stops
    if (event.detail.phase === 'end') {
      span.textContent = '';
    }
  });
</script>

<style>
  .detect-hover span {
    position: relative;
    top: -4px;
    left: 8px;
    border-radius: var(--wa-border-radius-s);
    background: var(--wa-color-neutral-fill-loud);
    color: var(--wa-color-neutral-on-loud);
    text-align: center;
    padding: 4px 6px;
  }

  .detect-hover span:empty {
    display: none;
  }
</style>

Custom Icons Jump to heading #

You can provide custom icons by passing a function to the getSymbol property.

<wa-rating label="Rating" class="rating-hearts" style="--symbol-color-active: #ff4136;"></wa-rating>

<script type="module">
  const rating = document.querySelector('.rating-hearts');

  await customElements.whenDefined("wa-rating")
  await rating.updateComplete

  rating.getSymbol = () => '<wa-icon name="heart" variant="solid"></wa-icon>';
</script>

Value-based Icons Jump to heading #

You can also use the getSymbol property to render different icons based on value.

<wa-rating label="Rating" class="rating-emojis"></wa-rating>

<script type="module">
  const rating = document.querySelector('.rating-emojis');

  await customElements.whenDefined("wa-rating")
  await rating.updateComplete

  rating.getSymbol = value => {
    const icons = ['face-angry', 'face-frown', 'face-meh', 'face-smile', 'face-laugh'];
    return `<wa-icon name="${icons[value - 1]}"></wa-icon>`;
  };
</script>

Properties Jump to heading #

Methods Jump to heading #

Events Jump to heading #

CSS custom properties Jump to heading #

CSS parts Jump to heading #

Dependencies Jump to heading #

This component automatically imports the following elements. Subdependencies, if any exist, will also be included in this list.

• <wa-icon>

Importing Jump to heading #

The autoloader is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.

import 'https://early.webawesome.com/webawesome@3.0.0-alpha.4/dist/components/rating/rating.js';