Rating MDB Pro component

Rating - Bootstrap 5 & Material Design 2.0 components

Rating component can be used to allow the users to share their opinion about the product, documentation page, photo and more.

Note: Read the API tab to find all available options and advanced customization


Basic example

You can automatically initialize the rating component using data-toggle="rating"


          <ul class="rating" data-toggle="rating">
            <li>
              <i class="far fa-star fa-sm text-primary" title="Bad"></i>
            </li>
            <li>
              <i class="far fa-star fa-sm text-primary" title="Poor"></i>
            </li>
            <li>
              <i class="far fa-star fa-sm text-primary" title="OK"></i>
            </li>
            <li>
              <i class="far fa-star fa-sm text-primary" title="Good"></i>
            </li>
            <li>
              <i class="far fa-star fa-sm text-primary" title="Excellent"></i>
            </li>
          </ul>
        

Read only

If you want to use a rating to show the score you can use the readonly option


          <ul class="rating" data-toggle="rating" data-readonly="true" data-value="3">
            <li>
              <i class="far fa-star fa-sm text-primary"></i>
            </li>
            <li>
              <i class="far fa-star fa-sm text-primary"></i>
            </li>
            <li>
              <i class="far fa-star fa-sm text-primary"></i>
            </li>
            <li>
              <i class="far fa-star fa-sm text-primary"></i>
            </li>
            <li>
              <i class="far fa-star fa-sm text-primary"></i>
            </li>
          </ul>
        

Events

Rating emits events after click and hover element. Check the browser console to test it.


          <ul class="rating" data-toggle="rating">
            <li>
              <i class="far fa-star fa-sm text-primary"></i>
            </li>
            <li>
              <i class="far fa-star fa-sm text-primary"></i>
            </li>
            <li>
              <i class="far fa-star fa-sm text-primary"></i>
            </li>
            <li>
              <i class="far fa-star fa-sm text-primary"></i>
            </li>
            <li>
              <i class="far fa-star fa-sm text-primary"></i>
            </li>
          </ul>
        

          const icon = document.querySelectorAll('#events-example i')

          icon.forEach((el) => {
            el.addEventListener('onHover.mdb.rating', (e) => {
              console.log('onHover')
            })
            el.addEventListener('onSelect.mdb.rating', (e) => {
              console.log('onSelect')
            })
          })
        

Custom text

You can add extra text before or after the icon using data-after and data-before


          <ul class="rating" data-toggle="rating">
            <li class="px-2 d-flex">
              <i class="far fa-star fa-sm text-primary" data-after="1" data-before="1"></i>
            </li>
            <li class="px-2 d-flex">
              <i class="far fa-star fa-sm text-primary" data-after="2" data-before="2"></i>
            </li>
            <li class="px-2 d-flex">
              <i class="far fa-star fa-sm text-primary" data-after="3" data-before="3"></i>
            </li>
            <li class="px-2 d-flex">
              <i class="far fa-star fa-sm text-primary" data-after="4" data-before="4"></i>
            </li>
            <li class="px-2 d-flex">
              <i class="far fa-star fa-sm text-primary" data-after="5" data-before="5"></i>
            </li>
          </ul>
        

Custom icons

You can use other icons easily. Just change the fa class to whatever you want.


          <ul class="rating" data-toggle="rating">
            <li>
              <i class="far fa-heart fa-sm text-primary"></i>
            </li>
            <li>
              <i class="far fa-heart fa-sm text-primary"></i>
            </li>
            <li>
              <i class="far fa-heart fa-sm text-primary"></i>
            </li>
            <li>
              <i class="far fa-heart fa-sm text-primary"></i>
            </li>
            <li>
              <i class="far fa-heart fa-sm text-primary"></i>
            </li>
          </ul>
        

Number of icons

If you want to display more or less icons in your rating, all you have to do is add as many icons as you like inside the <ul> tag.


          <ul class="rating" data-toggle="rating">
            <li>
              <i class="far fa-star fa-sm text-primary"></i>
            </li>
            <li>
              <i class="far fa-star fa-sm text-primary"></i>
            </li>
            <li>
              <i class="far fa-star fa-sm text-primary"></i>
            </li>
            <li>
              <i class="far fa-star fa-sm text-primary"></i>
            </li>
            <li>
              <i class="far fa-star fa-sm text-primary"></i>
            </li>
            <li>
              <i class="far fa-star fa-sm text-primary"></i>
            </li>
            <li>
              <i class="far fa-star fa-sm text-primary"></i>
            </li>
            <li>
              <i class="far fa-star fa-sm text-primary"></i>
            </li>
            <li>
              <i class="far fa-star fa-sm text-primary"></i>
            </li>
            <li>
              <i class="far fa-star fa-sm text-primary"></i>
            </li>
          </ul>
        

Icons custom color

If you want to set your own icon color you can use the data-color tag


          <ul class="rating" data-toggle="rating">
            <li>
              <i class="far fa-star fa-sm" data-color="#673ab7"></i>
            </li>
            <li>
              <i class="far fa-star fa-sm" data-color="#3f51b5"></i>
            </li>
            <li>
              <i class="far fa-star fa-sm" data-color="#2196f3"></i>
            </li>
            <li>
              <i class="far fa-star fa-sm" data-color="#03a9f4"></i>
            </li>
            <li>
              <i class="far fa-star fa-sm" data-color="#00bcd4"></i>
            </li>
          </ul>
        

Dynamic icons

You can make you rating more dynamically by adding data-dynamic="true"


          <ul class="rating" data-toggle="rating" data-dynamic="true">
            <li>
              <i class="far fa-angry fa-lg" data-color="#673ab7"></i>
            </li>
            <li>
              <i class="far fa-frown fa-lg" data-color="#3f51b5"></i>
            </li>
            <li>
              <i class="far fa-meh fa-lg" data-color="#2196f3"></i>
            </li>
            <li>
              <i class="far fa-smile fa-lg" data-color="#03a9f4"></i>
            </li>
            <li>
              <i class="far fa-grin-stars fa-lg" data-color="#00bcd4"></i>
            </li>
          </ul>
        

Styling active elements

You can use active class to set different styles for selected elements


          <ul class="rating" data-toggle="rating">
            <li>
              <i class="far fa-star fa-sm text-primary"></i>
            </li>
            <li>
              <i class="far fa-star fa-sm text-primary"></i>
            </li>
            <li>
              <i class="far fa-star fa-sm text-primary"></i>
            </li>
            <li>
              <i class="far fa-star fa-sm text-primary"></i>
            </li>
            <li>
              <i class="far fa-star fa-sm text-primary"></i>
            </li>
          </ul>
        

          .active { color: #00c851; }
        

Popover implementation example

Rating allows you to easily add popover functionality


          <ul class="rating" data-toggle="rating">
            <li>
              <i class="far fa-star fa-sm text-primary"></i>
            </li>
            <li>
              <i class="far fa-star fa-sm text-primary"></i>
            </li>
            <li>
              <i class="far fa-star fa-sm text-primary"></i>
            </li>
            <li>
              <i class="far fa-star fa-sm text-primary"></i>
            </li>
            <li>
              <i class="far fa-star fa-sm text-primary"></i>
            </li>
          </ul>
        

          const popoverIcon = document.querySelectorAll('#popover-example i');

          popoverIcon.forEach((el) => {
            return new mdb.Popover(el, {content: 'Example text', placement: 'top'});
          })
        

Get selected value

To get the value selected by the user just listen for the onSelect.mdb.rating event that returns a value. Open the browser console to test how it's work


          <ul class="rating" data-toggle="rating">
            <li>
              <i class="far fa-star fa-sm text-primary"></i>
            </li>
            <li>
              <i class="far fa-star fa-sm text-primary"></i>
            </li>
            <li>
              <i class="far fa-star fa-sm text-primary"></i>
            </li>
            <li>
              <i class="far fa-star fa-sm text-primary"></i>
            </li>
            <li>
              <i class="far fa-star fa-sm text-primary"></i>
            </li>
          </ul>
        

          const icons = document.querySelectorAll('i')

          icons.forEach((el) => {
            el.addEventListener('onSelect.mdb.rating', (e) => {
              console.log('e.value')
            })
          })
        

Rating - API


Usage

Via data attributes


        <ul class="rating" data-toggle="rating">
          <li>
            <i class="far fa-star fa-sm text-primary" title="Bad"></i>
          </li>
          <li>
            <i class="far fa-star fa-sm text-primary" title="Poor"></i>
          </li>
          <li>
            <i class="far fa-star fa-sm text-primary" title="OK"></i>
          </li>
          <li>
            <i class="far fa-star fa-sm text-primary" title="Good"></i>
          </li>
          <li>
            <i class="far fa-star fa-sm text-primary" title="Excellent"></i>
          </li>
        </ul>
      

Via JavaScript


        <ul class="rating">
          <li>
            <i class="far fa-star fa-sm text-primary" title="Bad"></i>
          </li>
          <li>
            <i class="far fa-star fa-sm text-primary" title="Poor"></i>
          </li>
          <li>
            <i class="far fa-star fa-sm text-primary" title="OK"></i>
          </li>
          <li>
            <i class="far fa-star fa-sm text-primary" title="Good"></i>
          </li>
          <li>
            <i class="far fa-star fa-sm text-primary" title="Excellent"></i>
          </li>
        </ul>
      

        const rating = document.getElementByClassName('rating');
        const instance = new mdb.Rating(rating, options);
      

Via jQuery

Note: By default, MDB does not include jQuery and you have to add it to the project on your own.


        <ul class="rating">
          <li>
            <i class="far fa-star fa-sm text-primary" title="Bad"></i>
          </li>
          <li>
            <i class="far fa-star fa-sm text-primary" title="Poor"></i>
          </li>
          <li>
            <i class="far fa-star fa-sm text-primary" title="OK"></i>
          </li>
          <li>
            <i class="far fa-star fa-sm text-primary" title="Good"></i>
          </li>
          <li>
            <i class="far fa-star fa-sm text-primary" title="Excellent"></i>
          </li>
        </ul>
      

        $('.rating').rating(options);
      

Options

Name Type Default Description
value Number '' Set default rating value
readonly Boolean false Disable hover, click and keypress events
after String '' Set a custom text after the icon
before String '' et a custom text before the icon
dynamic Boolean false Dynamically change previous icons to the currently selected/hovered icon
tooltip String 'top' set tooltip position
title String '' Set the text displayed in the tooltip (for use only on the icons element)
color String '' Set icon color (for use only on the icons element)

Methods

Name Description Example
dispose Removes a mdb.Rating instance instance.dispose()

        const myRatingEl = document.getElementById('myRating');
        const rating = new mdb.Rating(myRatingEl);
        rating.dispose();
      

Events

Name Description
onSelect.mdb.rating This event fires immediately when you clicked on icon. The clicked element is available as the target property of the event, and selected value as the value property.
onHover.mdb.rating This event fires immediately when you hovered on icon. The hovered element is available as the target property of the event, and hovered value as the value property.

        const myRatingEl = document.getElementById('myRating')
        myRatingEl.addEventListener('onSelect.mdb.rating', (e) => {
          // do something...
        })
      

Import

MDB UI KIT also works with module bundlers. Use the following code to import this component:


        import { Rating } from 'mdb-ui-kit';