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>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBRating, MDBRatingItem} from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const basicActive = ref(0);
            </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>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBRating, MDBRatingItem} from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const readonlyActive = ref(3);
            </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>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBRating, MDBRatingItem} from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const itemClick = (e: MouseEvent) => {
                console.log(e);
              };
              const itemHover = (e: MouseEvent) => {
                console.log(e);
              };
              const eventsActive = ref(0);
            </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>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBRating, MDBRatingItem} from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const customActive = ref(0);
            </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>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBRating, MDBRatingItem} from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const iconActive = ref(0);
            </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>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBRating, MDBRatingItem} from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const iconNumberActive = ref(0);
            </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>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBRating, MDBRatingItem} from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const iconsColorActive = ref(0);
            </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>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBRating, MDBRatingItem} from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const dynamicActive = ref(0);
            </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>
          
        
    
        
            
          <script setup lang="ts">
            import { MDBRating, MDBRatingItem} from "mdb-vue-ui-kit";
            import { ref } from "vue";

            const stylingActive = ref(0);
          </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>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBRating, MDBRatingItem} from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const popoverActive = ref(0);
            </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>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBRating, MDBRatingItem} from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const selectedActive = ref(0);
            </script>

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

Events

Events below have to be used together with events prop.

Name Description
itemClick This event fires immediately when you clicked on icon. The clicked element is available as the target property of the event.
itemHover This event fires immediately when you hovered on icon. The hovered element is available as the target property of the event. 
        
            
        <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>
        
        
    
        
            
        <script setup lang="ts">
          import { MDBRating, MDBRatingItem } from "mdb-vue-ui-kit";
          import { ref } from "vue";
          
          const itemClick = (e: MouseEvent) => {
            console.log(e);
          };
          const itemHover = (e: MouseEvent) => {
            console.log(e);
          };
          const eventsActive = ref(0);
          </script>

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. 

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

SCSS variables

        
            
        $rating-icon-padding: 0.25rem;