logo polydile dile-components


Web Component to create a rating user interface with stars.


npm i @dile/dile-rating

This component can display an interface to rating products, making ratings from 1 to 5 stars.


Import the component.

import '@dile/dile-rating/dile-rating.js';

Use the component.

<dile-rating value="5"></dile-rating>



CSS Custom Properties

You can customize it using the same dile-button CSS Custom Properties but also:

Custom propertyDescriptionDefault
--dile-rating-gapSpace between the stars0
--dile-star-colorStar color#FFA41C
--dile-star-sizeStar size32px
--dile-rating-undefined-colorStar color on undefined rating#ddd

dile-rating demos

Default rating user interface

class MyComponent extends LitElement {

  render() {
    return html`
      <dile-rating id="rating1"></dile-rating>
      <p id="msg1"></p>
  firstUpdated() {
    let textElement = this.shadowRoot.getElementById('msg1');
    let rating = this.shadowRoot.getElementById("rating1");
    textElement.textContent = "The rating is " + rating.value;
    rating.addEventListener('dile-rating-selected', function(e) {
      textElement.textContent = "The rating is " + e.detail.value;
customElements.define('my-component', MyComponent);
export const JsStory = () => html`<my-component></my-component>`;

Disable changes implementation

<dile-rating id="rating2"  value="3" disableChanges></dile-rating>

Styled rating

  .styled {
    --dile-star-color: #36c;
    --dile-star-size: 18px;
<dile-rating id="rating2"  value="3" class="styled"></dile-rating>