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
aria-item-label

The aria-label of rating items of the component

String

"$t:voteRating"

aria-label

The aria-label of the component

String

"$t:currentRating"

clearable

Allows the components value to be set to 0. Triggered by clicking on currently selected icon

Boolean

false

color

Color of the component (theme string or HEX string).

String

"primary"

disabled

Applies disabled style and removes all user interaction effects.

Boolean

false

empty-icon

The icon displayed when icon is empty (requires halves)

String

"star_outline"

font-sizes-config

Provide a set of sizes for fonts as a global component specific setting.

Object

{
  "defaultSize": 1,
  "sizes": {
    "small": 0.75,
    "medium": 1,
    "large": 1.25
  }
}
half-icon

The icon displayed when icon is half-filled (requires halves)

String

"star_half"

halves

Allow to select half of the item

Boolean

false

hover

Adds visual feedback when hovering on items

Boolean

false

icon

The icon displayed when icon is filled

String

"star"

max

The amount of items to display

Number

5

model-value

The value of the v-model bindings.

Number

0

numbers

When true, numbers from 1 to max are rendered instead of icons

Boolean

false

preset

Named preset combination of component props.

String

-

readonly

Disables all user interaction effects (pointer, hover)

Boolean

false

size

Specify size for component. "small", "medium", "large" sizes are available. If you want more control, you can provide number (will be used as px) or string value (rem and px sizes are supported).

String | Number

""

sizes-config

Provide a set of sizes as a global component specific setting.

Object

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

Add possibility to work with component without setting v-model.

Boolean

false

tabindex

Sets the custom tabindex.

String | Number

0

texts

The array of captions to be used with each value. The array length should be equal to max prop

Array

[]

unselected-color

Specifies the color of unselected items (by default color prop is used)

String

-

Events #

NameDescription

update-model-value

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.