Since Shoelace 2.0 Code stable Pattern Tentative Figma Needed

Rating

<sl-rating> | SlRating

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

Examples

Basic Rating 

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

sl-rating label="Rating"

import SlRating from '@teamshares/shoelace/dist/react/rating';

const App = () => <SlRating 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"

import SlRating from '@teamshares/shoelace/dist/react/rating';

const App = () => <SlRating 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"

import SlRating from '@teamshares/shoelace/dist/react/rating';

const App = () => <SlRating 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"

import SlRating from '@teamshares/shoelace/dist/react/rating';

const App = () => <SlRating 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;"

import SlRating from '@teamshares/shoelace/dist/react/rating';

const App = () => <SlRating 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"

import SlRating from '@teamshares/shoelace/dist/react/rating';

const App = () => <SlRating label="Rating" readonly 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"

import SlRating from '@teamshares/shoelace/dist/react/rating';

const App = () => <SlRating label="Rating" disabled 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;
  }

import { useState } from 'react';
import SlRating from '@teamshares/shoelace/dist/react/rating';

const terms = ['No rating', 'Terrible', 'Bad', 'OK', 'Good', 'Excellent'];
const 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;
  }
`;

function handleHover(event) {
  rating.addEventListener('sl-hover', event => {
    setFeedback(terms[event.detail.value]);

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

const App = () => {
  const [feedback, setFeedback] = useState(true);

  return (
    <>
      <div class="detect-hover">
        <SlRating label="Rating" onSlHover={handleHover} />
        <span>{feedback}</span>
      </div>
      <style>{css}</style>
    </>
  );
};

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>';

import SlRating from '@teamshares/shoelace/dist/react/rating';

const App = () => (
  <SlRating
    label="Rating"
    getSymbol={() => '<sl-icon name="heart-solid"></sl-icon>'}
    style={{ '--symbol-color-active': '#ff4136' }}
  />
);

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>`;
  };

import SlRating from '@teamshares/shoelace/dist/react/rating';

function 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>`;
}

const App = () => <SlRating label="Rating" getSymbol={getSymbol} />;

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script Import Bundler React

To import this component from the CDN using a script tag: 

<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.1.0/cdn/components/rating/rating.js"></script>

To import this component from the CDN using a JavaScript import: 

import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.1.0/cdn/components/rating/rating.js';

To import this component using a bundler: 

import '@shoelace-style/shoelace/dist/components/rating/rating.js';

To import this component as a React component: 

import SlRating from '@shoelace-style/shoelace/dist/react/rating';

Properties

Name Description Reflects Type Default
label A label that describes the rating to assistive devices. string ''
value The current rating. number 0
max The highest rating to show. number 5
precision The precision at which the rating will increase and decrease. For example, to allow half-star ratings, set this attribute to 0.5. number 1
readonly Makes the rating readonly. boolean false
disabled Disables the rating. boolean false
getSymbol 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. (value: number) => string -
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
sl-change onSlChange Emitted when the rating’s value changes. -
sl-hover onSlHover 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. { phase: 'start' | 'move' | 'end', value: number }

Learn more about events.

Methods

Name Description Arguments
focus() Sets focus on the rating. options: FocusOptions
blur() Removes focus from the rating. -

Learn more about methods.

Custom Properties

Name Description Default
--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.

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>