Rating

Vue Bootstrap 5 Star Rating component

Responsive star rating built with the latest Bootstrap 5 and Vue 3. 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 create the rating component using MDBRating and MDBRatingItem 

        
            
            <template>
              <MDBRating v-model="basicActive">
                <MDBRatingItem title="Bad" :index="1" />
                <MDBRatingItem title="Poor" :index="2" />
                <MDBRatingItem title="OK" :index="3" />
                <MDBRatingItem title="Good" :index="4" />
                <MDBRatingItem title="Excellent" :index="5" />
              </MDBRating>
            </template>
          
        
    
        
            
            <script>
              import { MDBRating, MDBRatingItem} from "mdb-vue-ui-kit";
              import { ref } from "vue";
              export default {
                components: {
                  MDBRating,
                  MDBRatingItem
                },
                setup() {
                  const basicActive = ref(0);
        
                  return {
                    basicActive
                  }
                }
              };
            </script>

Read only

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

        
            
            <template>
              <MDBRating v-model="readonlyActive" readonly :value="3">
                <MDBRatingItem :index="1" />
                <MDBRatingItem :index="2" />
                <MDBRatingItem :index="3" />
                <MDBRatingItem :index="4" />
                <MDBRatingItem :index="5" />
              </MDBRating>
            </template>
          
        
    
        
            
            <script>
              import { MDBRating, MDBRatingItem} from "mdb-vue-ui-kit";
              import { ref } from "vue";
              export default {
                components: {
                  MDBRating,
                  MDBRatingItem
                },
                setup() {
                  const readonlyActive = ref(3);
        
                  return {
                    readonlyActive
                  }
                }
              };
            </script>

Events

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

        
            
            <template>
              <MDBRating v-model="eventsActive" events @itemClick="itemClick" @itemHover="itemHover">
                <MDBRatingItem :index="1" />
                <MDBRatingItem :index="2" />
                <MDBRatingItem :index="3" />
                <MDBRatingItem :index="4" />
                <MDBRatingItem :index="5" />
              </MDBRating>
            </template>
          
        
    
        
            
            <script>
              import { MDBRating, MDBRatingItem} from "mdb-vue-ui-kit";
              import { ref } from "vue";
              export default {
                components: {
                  MDBRating,
                  MDBRatingItem
                },
                setup() {
                  const itemClick = e => {
                    console.log(e);
                  };
                  const itemHover = e => {
                    console.log(e);
                  };
                  const eventsActive = ref(0);
        
                  return {
                    itemClick,
                    itemHover,
                    eventsActive
                  }
                }
              };
            </script>

Custom text

You can add extra text before or after the icon using dinsertBefore and insertAfter 

        
            
            <template>
              <MDBRating v-model="customActive">
                <MDBRatingItem :index="1" insertBefore="1" insertAfter="1"/>
                <MDBRatingItem :index="2" insertBefore="2" insertAfter="2"/>
                <MDBRatingItem :index="3" insertBefore="3" insertAfter="3"/>
                <MDBRatingItem :index="4" insertBefore="4" insertAfter="4"/>
                <MDBRatingItem :index="5" insertBefore="5" insertAfter="5"/>
              </MDBRating>
            </template>
          
        
    
        
            
            <script>
              import { MDBRating, MDBRatingItem} from "mdb-vue-ui-kit";
              import { ref } from "vue";
              export default {
                components: {
                  MDBRating,
                  MDBRatingItem
                },
                setup() {
                  const customActive = ref(0);
        
                  return {
                    customActive
                  }
                }
              };
            </script>

Custom icons

You can use other icons easily with icon property

        
            
            <template>
              <MDBRating v-model="iconActive">
                <MDBRatingItem icon="heart" :index="1" />
                <MDBRatingItem icon="heart" :index="2" />
                <MDBRatingItem icon="heart" :index="3" />
                <MDBRatingItem icon="heart" :index="4" />
                <MDBRatingItem icon="heart" :index="5" />
              </MDBRating>
            </template>
          
        
    
        
            
            <script>
              import { MDBRating, MDBRatingItem} from "mdb-vue-ui-kit";
              import { ref } from "vue";
              export default {
                components: {
                  MDBRating,
                  MDBRatingItem
                },
                setup() {
                  const iconActive = ref(0);
        
                  return {
                    iconActive
                  }
                }
              };
            </script>

Number of icons

If you want to display more or less icons in your rating, all you have to do is add as many MDBRatingItems as you like 

        
            
            <template>
              <MDBRating v-model="iconNumberActive">
                <MDBRatingItem :index="1" />
                <MDBRatingItem :index="2" />
                <MDBRatingItem :index="3" />
                <MDBRatingItem :index="4" />
                <MDBRatingItem :index="5" />
                <MDBRatingItem :index="6" />
                <MDBRatingItem :index="7" />
                <MDBRatingItem :index="8" />
                <MDBRatingItem :index="9" />
                <MDBRatingItem :index="10" />
              </MDBRating>
            </template>
          
        
    
        
            
            <script>
              import { MDBRating, MDBRatingItem} from "mdb-vue-ui-kit";
              import { ref } from "vue";
              export default {
                components: {
                  MDBRating,
                  MDBRatingItem
                },
                setup() {
                  const iconNumberActive = ref(0);
                  return {
                    iconNumberActive
                  }
                }
              };
            </script>

Icons custom color

If you want to set your own icon color you can use the color property 

        
            
            <template>
              <MDBRating v-model="iconsColorActive">
                <MDBRatingItem :index="1" color="#673ab7" />
                <MDBRatingItem :index="2" color="#3f51b5" />
                <MDBRatingItem :index="3" color="#2196f3" />
                <MDBRatingItem :index="4" color="#03a9f4" />
                <MDBRatingItem :index="5" color="#00bcd4" />
              </MDBRating>
            </template>
          
        
    
        
            
            <script>
              import { MDBRating, MDBRatingItem} from "mdb-vue-ui-kit";
              import { ref } from "vue";
              export default {
                components: {
                  MDBRating,
                  MDBRatingItem
                },
                setup() {
                  const iconsColorActive = ref(0);
                  return {
                    iconsColorActive
                  }
                }
              };
            </script>

Dynamic icons

You can make you rating more dynamically by adding dynamic property 

        
            
            <template>
              <MDBRating v-model="dynamicActive" dynamic>
                <MDBRatingItem icon="angry" size="lg" :index="1" color="#673ab7" />
                <MDBRatingItem icon="frown" size="lg" :index="2" color="#3f51b5" />
                <MDBRatingItem icon="meh" size="lg" :index="3" color="#2196f3" />
                <MDBRatingItem icon="smile" size="lg" :index="4" color="#03a9f4" />
                <MDBRatingItem icon="grin-stars" size="lg" :index="5" color="#00bcd4"/>
              </MDBRating>
            </template>
          
        
    
        
            
            <script>
              import { MDBRating, MDBRatingItem} from "mdb-vue-ui-kit";
              import { ref } from "vue";
              export default {
                components: {
                  MDBRating,
                  MDBRatingItem
                },
                setup() {
                  const dynamicActive = ref(0);
                  return {
                    dynamicActive
                  }
                }
              };
            </script>

Styling active elements

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

        
            
            <template>
              <MDBRating v-model="stylingActive">
                <MDBRatingItem :index="1" />
                <MDBRatingItem :index="2" />
                <MDBRatingItem :index="3" />
                <MDBRatingItem :index="4" />
                <MDBRatingItem :index="5" />
              </MDBRating>
            </template>
          
        
    
        
            
          <script>
            import { MDBRating, MDBRatingItem} from "mdb-vue-ui-kit";
            import { ref } from "vue";
            export default {
              components: {
                MDBRating,
                MDBRatingItem
              },
              setup() {
                const stylingActive = ref(0);
                return {
                  stylingActive
                }
              }
            };
            </script>
          
        
    
        
            
            <style>
              .active {
                color: #00c851;
              }
            </style>

Popover implementation example

Rating allows you to easily add popover functionality

        
            
            <template>
              <MDBRating v-model="popoverActive">
                <MDBRatingItem :index="1" popover="Example text" />
                <MDBRatingItem :index="2" popover="Example text" />
                <MDBRatingItem :index="3" popover="Example text" />
                <MDBRatingItem :index="4" popover="Example text" />
                <MDBRatingItem :index="5" popover="Example text" />
              </MDBRating>
            </template>
          
        
    
        
            
            <script>
              import { MDBRating, MDBRatingItem} from "mdb-vue-ui-kit";
              import { ref } from "vue";
              export default {
                components: {
                  MDBRating,
                  MDBRatingItem
                },
                setup() {
                  const popoverActive = ref(0);
                  return {
                    popoverActive
                  }
                }
              };
            </script>

Get selected value

To get the value selected just use v-model value

        
            
            <template>
              <MDBRating v-model="selectedActive">
                <MDBRatingItem :index="1" />
                <MDBRatingItem :index="2" />
                <MDBRatingItem :index="3" />
                <MDBRatingItem :index="4" />
                <MDBRatingItem :index="5" />
              </MDBRating>
            </template>
          
        
    
        
            
            <script>
              import { MDBRating, MDBRatingItem} from "mdb-vue-ui-kit";
              import { ref } from "vue";
              export default {
                components: {
                  MDBRating,
                  MDBRatingItem
                },
                setup() {
                  const selectedActive = ref(0);
                  return {
                    selectedActive
                  }
                }
              };
            </script>

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

Rating - API

Import

        
            
          <script>
            import { 
              MDBRating, 
              MDBRatingItem 
            } from "mdb-vue-ui-kit";
          </script>

Properties

Rating

Name Type Default Description
tag String 'ul' Defines tag of the MDBRating element
v-model String Indicates rating value
readonly Boolean false Disable hover, click and keypress events
events Boolean false Enable emitting click and hover events on rating elements
dynamic Boolean false Dynamically change previous icons to the currently selected/hovered icon
classes String '' Adds custom classes to MDBRating element

Rating Item

Name Type Default Description
tag String 'li' Defines tag of the MDBRatingItem element
classes String Adds custom classes to MDBRatingItem element
iconClass String Adds custom classes to icon element
icon String 'star' Defines rating icon
flag String '' Enables using flags as icon
size String 'sm' Defines icon size
color String 'sm' Defines icon color
title String '' Set the text displayed in the tooltip
index Number Set index on rating element (obligatory property)
popover Boolean | String false Enables showing popover on click. When true enables using #default slot as popover content. When String, passed text is used as popover content
insertBefore String '' Set a custom text before the icon
insertAfter String '' Set a custom text after the icon