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"

Read only

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

Events

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

Custom text

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

Custom icons

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

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.

Icons custom color

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

Dynamic icons

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

Styling active elements

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

Popover implementation example

Rating allows you to easily add popover functionality

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

If you want to support our friends from Tailwind Elements you can also check out the Tailwind rating documentation.

Rating - API

Usage

Via data attributes


        <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


        <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()
getInstance Static method which allows you to get the rating instance associated to a DOM element. Rating.getInstance(myRatingEl) 

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