Rating

Bootstrap 5-Star Rating

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

Bootstrap 5-star rating plugin can be used to allow the users to share their opinion about the product, documentation page, photo and more.

Visit API tab for all available properties and events.

Vue live preview

Basic Example

Simple 5 star rating. Use v-model to get and set value.

        
            
          <template>
              <mdb-rating v-model="value"/>
          </template>
        
        
    
        
            
          <script>
            import { mdbRating } from "mdbvue";
            export default {
              name: "RatingPage",
              components: {
                mdbRating
              },
              data() {
                return {
                  value: 2
                }
              }
            };
          </script>

Empty five stars

5 empty stars rating with filling colour on hover.

        
            
              <template>
                <mdb-rating far :options="options" :activeFar="false"/>
              </template>
            
        
    
        
            
              <script>
                import { mdbRating } from "mdbvue";
                export default {
                  name: "RatingPage",
                  components: {
                    mdbRating
                  },
                  data() {
                    return {
                      basicRating: '',
                      options: [
                        {
                          feedback: "Very bad",
                          iconActiveClass: "yellow-text-dark-4",
                        },
                        {
                          feedback: "Poor",
                          iconActiveClass: "yellow-text-dark-3",
                        },
                        {
                          feedback: "OK",
                          iconActiveClass: "yellow-text-dark-2",
                        },
                        {
                          feedback: "Good",
                          iconActiveClass: "yellow-text-dark-1",
                        },
                        {
                          feedback: "Excellent",
                        }
                      ]
                    }
                  }
                };
              </script>
            
        
    
        
            
              <style>
                .yellow-text-dark-2 {
                  color: #d7c952!important;
                }
                .yellow-text-dark-3 {
                  color: #9b9247!important;
                }
                .yellow-text-dark-4 {
                  color: #827c47!important;
                }
                .yellow-text-dark-1 {
                  color: #e9d947!important;
                }
              </style>

Faces Rating

5 faces that changes mood on hover

        
            
          <template>
            <mdb-rating far icon="meh-blank" :activeFar="true" :options="faceOptions" iconActiveClass="black-text"/>
          </template>
        
        
    
        
            
          <script>
            import { mdbRating } from "mdbvue";
            export default {
              name: "RatingPage",
              components: {
                mdbRating
              },
              data() {
                return {
                  basicRating: '',
                  faceOptions: [
                    {
                      feedback: "Very bad",
                      icon: "sad-cry",
                    },
                    {
                      feedback: "Poor",
                      icon: "frown",
                    },
                    {
                      feedback: "OK",
                      icon: "meh",
                    },
                    {
                      feedback: "Good",
                      icon: "smile",
                    },
                    {
                      feedback: "Excellent",
                      icon: "laugh-beam",
                    }
                  ]
                }
              }
            };
          </script>

Rating with feedback

Adding prop feedback<> will enable popover with textarea on click. 

        
            
          <template>
            <mdb-rating feedback @submit="submitFeedback"/>
          </template>
        
        
    
        
            
          <script>
            import { mdbRating } from "mdbvue";
            export default {
              name: "RatingPage",
              components: {
                mdbRating
              },
              methods: {
                submitFeedback(message){
                  console.log(message);
                }
              }
            };
          </script>

Rating - API

In this section you will find advanced information about the Rating component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.

Rating

API Reference: Properties

Name Type Default Description Example
tag String 'div' Sets a tag of the rating component <mdb-rating tag="li"/>
feedback Boolean false If set to true, clicking a star will trigger a popover with a textarea <mdb-rating feedback/>
icon String "star" Sets default icon <mdb-rating icon="smile"/>
iconClass String "grey-text" Sets default icon's classes <mdb-rating iconClass="yellow-text"/>
iconActiveClass String "yellow-text" Sets classes for all active icons which don't have activeClass specified in options <mdb-rating iconActiveClass="black-text"/>
far Boolean false Sets default icons' style to regular <mdb-rating far/>
activeFar Boolean false Sets active icons' style to regular <mdb-rating activeFar/>
fal Boolean false Sets default icons' style to light <mdb-rating fal/>
activeFal Boolean false Sets active icons' style to light <mdb-rating activeFal/>
fab Boolean false Sets default icons' style to brands <mdb-rating fab/>
activeFab Boolean false Sets active icons' style to brands <mdb-rating activeFab/>
fad Boolean false Sets default icons' style to duotone (Fa premium users) <mdb-rating fad/>
activeFad Boolean false Sets active icons' style to duotone <mdb-rating activeFad/>
options Array [ { feedback: "Very bad" }, { feedback: "Poor" }, { feedback: "OK" }, { feedback: "Good" }, { feedback: "Excellent" } ] Sets custom options for each icon. All available options are listed here <mdb-rating activeFab/>
disable Boolean false Disables rating <mdb-rating :value="4" disabled/>

Options structure

Property options takes as an argument an Array of objects. Available keys for those objects are:

  • feedback
  • icon
  • fab
  • far
  • fas
  • iconActiveClass
        
            
      <script>
        const options = [{
          feedback: String,
          icon: String,
          fab: Boolean,
          far: Boolean,
          fas: Boolean,
          iconActiveClass: String
        }];
      </script>

API Reference: Events and directives

Name Description Example
v-model You can set and get rating's value by binding it with key in your data <mdb-rating v-model="ratingValue"/>
@submit If feedback property is set to true, this event emits value from popover's textarea <mdb-rating @submit="submitFeedback"/>