Quasar Rating is a Component which allows users to rate items, usually known as “Star Rating”.

Works well with QField for additional functionality such as a helper, error message placeholder and many others.

Basic Usage

<q-rating v-model="ratingModel" :max="3" />

<!-- Disabled State -->

Vue Properties

Supports v-model which should be binded to a Number in your scope.

Vue PropertyTypeDescription
maxNumberNumber of icons to display.
iconStringIcon to use as grade. Default value: grade.
colorStringOne of Quasar Color Palette.
sizeStringCSS size String. Examples: ‘12px’, ‘2rem’.
readonlyBooleanDisplay as readonly.
disableBooleanWhen set to true user can not change model value and Rating is faded.

Vue Methods

Vue MethodDescription
set(value)Parses and sets that value.

Vue Events

Vue EventDescription
@change(newVal)Triggered on model value change.


Use one of the Quasar colors from the Color Palette, like primary, secondary, orange-7, teal-2 as CSS class: