---
title: Rating
desc: >-
  The QRating Vue component allows the user to rate items. It's usually known as
  'star rating'.
---
Quasar Rating is a Component which allows users to rate items, usually known as “Star Rating”.

## QRating API

### Props

- `name` (string, optional)
  Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL
  Examples: `'car_id'`
- `size` (string, optional)
  Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
  Examples: `'16px'`, `'2rem'`, `'xs'`, `'md'`
- `model-value` (number, required, syncable)
  Model of the component; Either use this property (along with a listener for 'update:model-value' event) OR use v-model directive
  Examples: `v-model="rating"`, `:model-value="rating"`, `:model-value="2"`
- `max` (number | string, optional), default `5`
  Number of icons to display
- `icon` (string | any[], optional)
  Icon name following Quasar convention; make sure you have the icon library installed unless you are using 'img:' prefix; If an array is provided each rating value will use the corresponding icon in the array (0 based)
  Examples: `'map'`, `'ion-add'`, `'img:https://cdn.quasar.dev/logo-v2/svg/logo.svg'`, `'img:path/to/some_image.png'`
- `icon-selected` (string | any[], optional)
  Icon name following Quasar convention to be used when selected (optional); make sure you have the icon library installed unless you are using 'img:' prefix; If an array is provided each rating value will use the corresponding icon in the array (0 based)
  Examples: `'map'`, `'ion-add'`, `'img:https://cdn.quasar.dev/logo-v2/svg/logo.svg'`, `'img:path/to/some_image.png'`
- `icon-half` (string | any[], optional)
  Icon name following Quasar convention to be used when selected (optional); make sure you have the icon library installed unless you are using 'img:' prefix; If an array is provided each rating value will use the corresponding icon in the array (0 based)
  Examples: `'map'`, `'ion-add'`, `'img:https://cdn.quasar.dev/logo-v2/svg/logo.svg'`, `'img:path/to/some_image.png'`
- `icon-aria-label` (string | any[], optional)
  Label to be set on aria-label for Icon; If an array is provided each rating value will use the corresponding aria-label in the array (0 based); If string value is provided the rating value will be appended; If not provided the name of the icon will be used
  Examples:
    - `'Rating'`
    - `['Bad', 'Normal', 'Good']`
- `color` (string | any[], optional)
  Color name for component from the Quasar Color Palette; v1.5.0+: If an array is provided each rating value will use the corresponding color in the array (0 based)
  Examples:
    - `'primary'`
    - `'teal'`
    - `'teal-10'`
    - `['accent', 'grey-7']`
- `color-selected` (string | any[], optional)
  Color name from the Quasar Palette for selected icons
  Examples: `'primary'`, `'teal'`, `'teal-10'`
- `color-half` (string | any[], optional)
  Color name from the Quasar Palette for half selected icons
  Examples: `'primary'`, `'teal'`, `'teal-10'`
- `no-dimming` (boolean, optional)
  Does not lower opacity for unselected icons
- `no-reset` (boolean, optional)
  When used, disables default behavior of clicking/tapping on icon which represents current model value to reset model to 0
- `readonly` (boolean, optional)
  Put component in readonly mode
- `disable` (boolean, optional)
  Put component in disabled mode

### Events

- `@update:model-value`
  Emitted when the component needs to change the model; Is also used by v-model
  Params:
    - `value` (any, required)
      New model value

### Slots

- `#tip-[name]`
  Slot to define the tooltip of icon at '[name]' where name is a 1-based index; Suggestion: QTooltip

## Usage

### Basic

```vue
<template>
  <div class="q-pa-md">
    <div class="q-gutter-y-md column">
      <q-rating v-model="ratingModel" size="1.5em" icon="thumb_up" />
      <q-rating
        v-model="ratingModel"
        size="2em"
        color="red-7"
        icon="favorite_border"
      />
      <q-rating
        v-model="ratingModel"
        size="2.5em"
        color="purple-4"
        icon="create"
      />
      <q-rating v-model="ratingModel" size="3em" color="brown-5" icon="pets" />
      <q-rating
        v-model="ratingModel"
        size="3.5em"
        color="green-5"
        icon="star_border"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const ratingModel = ref(3)
</script>
```

### Custom number of choices

```vue
<template>
  <div class="q-pa-md">
    <q-rating v-model="ratingModel" size="2em" :max="10" color="primary" />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const ratingModel = ref(3)
</script>
```

### Accessibility *(v2.25+)*

QRating exposes the [WAI-ARIA radio group pattern](https://www.w3.org/WAI/ARIA/apg/patterns/radio/): the component is a `radiogroup` whose stars are `role="radio"` elements, with `aria-checked` set on the star matching the current model and a roving tabindex (the selected star — or the first one — is the group's single Tab stop). Each star's accessible name comes from the `icon-aria-label` prop (a string gets the star's value appended, an array names each star individually; the icon name is the fallback), and `aria-readonly` / `aria-disabled` are set on the group when applicable.

Note that half values (see "Floating number" below) are not conveyed to screen readers: `aria-checked="true"` requires an exact integer match, so a model of e.g. 3.5 announces no star as checked.

#### Keyboard navigation

QRating uses radio-group keyboard behavior:

- <kbd>Space</kbd> or <kbd>Enter</kbd> update the model.
- <kbd>Arrow Right</kbd> and <kbd>Arrow Down</kbd> move focus to the next value (<kbd>Space</kbd>/<kbd>Enter</kbd> required to be pressed to update the model).
- <kbd>Arrow Left</kbd> and <kbd>Arrow Up</kbd> move focus to the previous value (<kbd>Space</kbd>/<kbd>Enter</kbd> required to be pressed to update the model).

### Icons

```vue
<template>
  <div class="q-pa-md">
    <q-rating
      v-model="ratingModel"
      size="3.5em"
      icon="img:https://cdn.quasar.dev/logo-v2/svg/logo.svg"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const ratingModel = ref(3)
</script>
```

In the example below, when using the `icon-selected` prop, notice we can still use `icon` as well. The latter becomes the icon(s) when they are not selected.

### Different icon when selected

```vue
<template>
  <div class="q-pa-md">
    <div class="q-gutter-y-md column">
      <q-rating
        v-model="ratingModel"
        size="3.5em"
        color="green-5"
        icon="star_border"
        icon-selected="star"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const ratingModel = ref(3)
</script>
```

### Different icon for each rating

```vue
<template>
  <div class="q-pa-md">
    <div class="q-gutter-y-md column">
      <q-rating
        v-model="ratingModel"
        :max="4"
        size="3.5em"
        color="green-5"
        :icon="icons"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const ratingModel = ref(3)
const icons = [
  'sentiment_very_dissatisfied',
  'sentiment_dissatisfied',
  'sentiment_satisfied',
  'sentiment_very_satisfied'
]
</script>
```

### Colors

When using the `color-selected` prop, notice we can still use `color` as well. The latter becomes the color(s) of the icons when they are not selected.

### Different color for each rating

```vue
<template>
  <div class="q-pa-md">
    <div class="q-gutter-y-md column">
      <q-rating
        v-model="ratingModel"
        size="3.5em"
        color="grey"
        :color-selected="ratingColors"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const ratingModel = ref(4)
const ratingColors = [
  'light-green-3',
  'light-green-6',
  'green',
  'green-9',
  'green-10'
]
</script>
```

### Floating number

```vue
<template>
  <div class="q-pa-md">
    <div class="q-gutter-y-md column">
      <q-rating
        v-model="model1"
        max="7"
        size="3em"
        color="green-5"
        icon="star_border"
        icon-selected="star"
        icon-half="star_half"
      />

      <q-rating
        v-model="model2"
        max="7"
        size="3em"
        color="yellow"
        icon="star_border"
        icon-selected="star"
        icon-half="star_half"
        no-dimming
      />

      <q-rating
        v-model="model3"
        max="7"
        size="3em"
        color="red"
        color-selected="red-9"
        icon="favorite_border"
        icon-selected="favorite"
        icon-half="favorite"
        no-dimming
      />

      <div>
        <q-btn color="grey" no-caps label="Reset" @click="resetModels" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const model1 = ref(3.5)
const model2 = ref(2.3)
const model3 = ref(4.5)

function resetModels() {
  model1.value = 3.5
  model2.value = 2.3
  model3.value = 4.5
}
</script>
```

### No dimming

```vue
<template>
  <div class="q-pa-md">
    <q-rating
      v-model="model"
      max="5"
      size="3.5em"
      color="yellow"
      icon="star_border"
      icon-selected="star"
      icon-half="star_half"
      no-dimming
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const model = ref(2.3)
</script>
```

### Tooltips

Notice how we can add tooltips to each icon in the example below.

### With QTooltip

```vue
<template>
  <div class="q-pa-md">
    <q-rating v-model="ratingModel" size="2em" :max="3" color="primary">
      <template v-slot:tip-1>
        <q-tooltip>Not bad</q-tooltip>
      </template>
      <template v-slot:tip-2>
        <q-tooltip>Good</q-tooltip>
      </template>
      <template v-slot:tip-3>
        <q-tooltip>Very good!</q-tooltip>
      </template>
    </q-rating>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const ratingModel = ref(2)
</script>
```

### Sizes

Apart from the standard sizes below, you can define your own through the `size` property.

### Standard sizes

```vue
<template>
  <div class="q-pa-md">
    <div class="q-gutter-y-md column">
      <q-rating
        v-for="size in ['xs', 'sm', 'md', 'lg', 'xl']"
        :key="size"
        :size="size"
        v-model="ratingModel"
        icon="stars"
        color="primary"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const ratingModel = ref(3)
</script>
```

### Readonly and disable

```vue
<template>
  <div class="q-pa-md">
    <div class="q-gutter-y-md column">
      <q-rating v-model="ratingModel" size="2em" color="orange" readonly />

      <q-rating v-model="ratingModel" size="2em" color="purple" disable />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const ratingModel = ref(3)
</script>
```

### Native form submit

When dealing with a native form which has an `action` and a `method` (eg. when using Quasar with ASP.NET controllers), you need to specify the `name` property on QRating, otherwise formData will not contain it (if it should):

### Native form

```vue
<template>
  <div class="q-pa-md">
    <q-form @submit="onSubmit" class="q-gutter-md">
      <q-rating
        name="quality"
        v-model="quality"
        max="5"
        size="3.5em"
        color="yellow"
        icon="star_border"
        icon-selected="star"
        no-dimming
      />

      <div>
        <q-btn label="Submit" type="submit" color="primary" />
      </div>
    </q-form>

    <q-card
      v-if="submitResult.length > 0"
      flat
      bordered
      class="q-mt-md"
      :class="$q.dark.isActive ? 'bg-grey-9' : 'bg-grey-2'"
    >
      <q-card-section
        >Submitted form contains the following formData (key =
        value):</q-card-section
      >
      <q-separator />
      <q-card-section class="row q-gutter-sm items-center">
        <div
          v-for="(item, index) in submitResult"
          :key="index"
          class="q-px-sm q-py-xs bg-grey-8 text-white rounded-borders text-center text-no-wrap"
          >{{ item.name }} = {{ item.value }}</div
        >
      </q-card-section>
    </q-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const quality = ref(3)
const submitResult = ref([])

function onSubmit(evt) {
  const formData = new FormData(evt.target)
  const data = []

  for (const [name, value] of formData.entries()) {
    data.push({
      name,
      value
    })
  }

  submitResult.value = data
}
</script>
```