Rating

Bootstrap 5 Star Rating component

Responsive star rating built with the latest Bootstrap 5. Rating provides insight into others opinions and experiences with a product. Use stars or other custom symbols (i.e. smiling faces}

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-mdb-toggle="rating"

Edit in sandbox 
        
            
            <ul class="rating" data-mdb-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

Edit in sandbox 
        
            
            <ul class="rating" data-mdb-toggle="rating" data-mdb-readonly="true" data-mdb-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.

Edit in sandbox 
        
            
            <ul class="rating" data-mdb-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', () => {
                console.log('onHover');
              });
              el.addEventListener('onSelect.mdb.rating', () => {
                console.log('onSelect');
              });
            })

Custom text

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

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

Custom icons

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

Edit in sandbox 
        
            
            <ul class="rating" data-mdb-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.

Edit in sandbox 
        
            
            <ul class="rating" data-mdb-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-mdb-color tag

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

Dynamic icons

You can make your rating more dynamic by adding data-mdb-dynamic="true"

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

Styling active elements

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

Edit in sandbox 
        
            
            <ul class="rating" data-mdb-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

Edit in sandbox 
        
            
            <ul class="rating" data-mdb-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

Edit in sandbox 
        
            
            <ul class="rating" data-mdb-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

Edit in sandbox 
        
            
            <ul class="rating" data-mdb-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

Edit in sandbox 
        
            
          <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.

Edit in sandbox 
        
            
          <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>
        
        
    
        
            
          $(document).ready(() => {
            $('.rating').rating(options);
          });

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-mdb-, as in data-mdb-value="1".

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 myRating.dispose()
getInstance Static method which allows you to get the rating instance associated to a DOM element. Rating.getInstance(myRatingEl)
getOrCreateInstance Static method which returns the rating instance associated to a DOM element or create a new one in case it wasn't initialized. Rating.getOrCreateInstance(myRatingEl)
Edit in sandbox 
        
            
          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.
Edit in sandbox 
        
            
          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:

Edit in sandbox 
        
            
          import { Rating } from 'mdb-ui-kit';

CSS variables

As part of MDB’s evolving CSS variables approach, rating now use local CSS variables on .rating for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

Edit in sandbox 
        
            
        // .rating
        --#{$prefix}rating-icon-padding: #{$rating-icon-padding};

SCSS variables

Edit in sandbox 
        
            
        $rating-icon-padding: 0.25rem;