Official Partner of
Nuxt
๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅ Hire us

Rating
#

The va-rating component is a simple yet powerful element when it comes to gathering users feedback. Just in a few lines of code it can provide you with users ratings about your product or application.

Examples
#

Default
#

The va-rating component has a simple interface to collect user feedback.

Open in GitHub

Colors
#

With color prop you can change the color of the component.

Open in GitHub

Sizes
#

Using size prop specify custom size for an va-rating component.

Open in GitHub

Hover
#

By using hover prop you can see visual changes of value before click.

Value: 3
Open in GitHub

Halves
#

You can divide your va-rating component values on halves.

Value: 3
Open in GitHub

Numbers
#

Want to see numbers instead of icons? We got you covered.

Open in GitHub

Custom Icons
#

Providing this prop to component allows you to add custom icons.

Open in GitHub

Item slot
#

You can pass own html to the component using item slot. We still handle user events and accessibility, but you can change appearance.

1
2
3
4
5
Open in GitHub

Texts
#

A component can be covered by different custom labels for each value.

Normal
Open in GitHub

Clearable
#

Selecting current value again will clear the component.

Open in GitHub

API
#

Props #

NameDescriptionTypesDefault
ariaItemLabel

String

"$t:voteRating"

ariaLabel

String

"$t:currentRating"

clearable

Boolean

false

color

String

"primary"

disabled

Boolean

false

emptyIcon

String

"star_outline"

fontSizesConfig

Object

{
  "defaultSize": 1,
  "sizes": {
    "small": 0.75,
    "medium": 1,
    "large": 1.25
  }
}
halfIcon

String

"star_half"

halves

Boolean

false

hover

Boolean

false

icon

String

"star"

max

Number

5

modelValue

Number

0

numbers

Boolean

false

preset

String

-

readonly

Boolean

false

size

String | Number

""

sizesConfig

Object

{
  "defaultSize": 48,
  "sizes": {
    "small": 32,
    "medium": 48,
    "large": 64
  }
}
stateful

Boolean

false

tabindex

String | Number

0

texts

Array

[]

unselectedColor

String

-

Events #

NameDescription

update:modelValue

The event is triggered when the component needs to change the model. Is also used by v-model

Css Variables #

NameDefault Value
--va-rating-display flex
--va-rating-number-item-font-size inherit
--va-rating-number-item-margin 0.1em
--va-rating-number-item-font-weight 700
--va-rating-number-item-cursor pointer
--va-rating-item-wrapper-cursor pointer

FAQ
#

Is rating component keyboard accessible?
#

Yes, you can use Tab (Shift+Tab) to move between icons and press Enter to submit value. Or you can use arrow keys (Left and Right) to change rating value

Can I use every other prop in combination with numbers prop?
#

Yes, all props are compatible between each other.