Skip to content

Rate UPDATED

Rate is a set of radio buttons that allow the user to rate something.

Basic usage

Rate uses a five-point scale by default, though you can set max to set the maximum score. Then you can confirm the rating by clicking on the stars.

Custom color

You can set the color of the rating icon via color and also via void-color for unselected rating icons.

Half star

Half-stars can also be achieved by adding an allow-half attribute when rating.

Rate Props

NameTypeDefaultDescription
modelValue / v-modelnumber0Binding value.
maxnumber5Max rating score.
readonlybooleanfalseWhether Rate is read-only.
allow-halfbooleanfalseWhether picking half start is allowed.
colorstringwarningSelected icon color.
void-colorstringundefinedUnselected icon color.
textstringundefinedText displayed at the end of the star.

Rate Methods

NameParametersDescription
change(value: number) => voidTriggers when rate value is changed.

MIT Licensed