Since Shoelace 2.0 Code stable Pattern Tentative Figma Needed

Rating

sl-rating

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

Examples

Basic Rating 

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

sl-rating label="Rating"

Labels

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

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

sl-rating label="Rate this component"

Maximum Value

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

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

sl-rating label="Rating" max="3"

Precision

Use the precision attribute to let users select fractional ratings.

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

sl-rating label="Rating" precision="0.5" value="2.5"

Symbol Sizes

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

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

sl-rating label="Rating" style="--symbol-size: 2rem;"

Readonly

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

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

sl-rating label="Rating" readonly=true value="3"

Disabled

Use the disable attribute to disable the rating.

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

sl-rating label="Rating" disabled=true value="3"

Detecting Hover

Use the sl-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">
  <sl-rating label="Rating"></sl-rating>
  <span></span>
</div>

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

  rating.addEventListener('sl-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(--sl-border-radius-small);
    background: var(--sl-color-neutral-900);
    color: var(--sl-color-neutral-0);
    text-align: center;
    padding: 4px 6px;
  }

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

.detect-hover
  sl-rating label="Rating"
  span

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

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

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


css:
  .detect-hover span {
    position: relative;
    top: -4px;
    left: 8px;
    border-radius: var(--sl-border-radius-small);
    background: var(--sl-color-neutral-900);
    color: var(--sl-color-neutral-0);
    text-align: center;
    padding: 4px 6px;
  }

  .detect-hover span:empty {
    display: none;
  }

Custom Icons

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

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

<script>
  const rating = document.querySelector('.rating-hearts');
  rating.getSymbol = () => '<sl-icon name="heart-solid"></sl-icon>';
</script>

sl-rating.rating-hearts label="Rating" style="--symbol-color-active: #ff4136;"

javascript:
  const rating = document.querySelector('.rating-hearts');
  rating.getSymbol = () => '<sl-icon name="heart-solid"></sl-icon>';

Value-based Icons

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

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

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

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

sl-rating.rating-emojis label="Rating"

javascript:
  const rating = document.querySelector('.rating-emojis');

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

Component Props

Property Default Details
label ''

string

A label that describes the rating to assistive devices.
value 0

number

The current rating.
max 5

number

The highest rating to show.
precision 1

number

The precision at which the rating will increase and decrease. For example, to allow half-star ratings, set this attribute to 0.5.

readonly false

boolean

Makes the rating readonly.
disabled false

boolean

Disables the rating.
getSymbol —

(value: number) => string

A function that customizes the symbol to be rendered. The first and only argument is the rating’s current value. The function should return a string containing trusted HTML of the symbol to render at the specified value. Works well with <sl-icon> elements.

updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name Name Name React Event Details
sl-change sl-change sl-change onSlChange

Emitted when the rating’s value changes.
sl-hover sl-hover sl-hover onSlHover

{ phase: 'start' | 'move' | 'end', value: number }

Emitted when the user hovers over a value. The phase property indicates when hovering starts, moves to a new value, or ends. The value property tells what the rating’s value would be if the user were to commit to the hovered value.

Learn more about events.

Methods

Name Details
focus()

options: FocusOptions

Sets focus on the rating.
blur()

Removes focus from the rating.

Learn more about methods.

Custom Properties

Name Details
--symbol-color

The inactive color for symbols.
--symbol-color-active

The active color for symbols.
--symbol-size

The size of symbols.
--symbol-spacing

The spacing to use around symbols.

Learn more about customizing CSS custom properties.

CSS Parts

Name Description
base The component’s base wrapper.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

  • <sl-icon>