Quasar Rating is a Component which allows users to rate items, usually known as “Star Rating”.
Usage
Basic
Accessibility v2.25+
QRating exposes the WAI-ARIA radio group pattern: 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:
- Space or Enter update the model.
- Arrow Right and Arrow Down move focus to the next value (Space/Enter required to be pressed to update the model).
- Arrow Left and Arrow Up move focus to the previous value (Space/Enter required to be pressed to update the model).
Icons
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.
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.
Floating number
No dimming
Tooltips
Notice how we can add tooltips to each icon in the example below.
Sizes
Apart from the standard sizes below, you can define your own through the size property.
Readonly and disable
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):