Epicmax - We are the core team behind Vuestic UI and Vuestic Admin and frontend development company specializing in Vue.js since our founding in 2017.
🔥🔥🔥 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

The aria-label of rating items of the component

String

"$t:voteRating"

ariaLabel

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

emptyIcon

The icon displayed when icon is empty (requires halves)

String

"star_outline"

fontSizesConfig

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
  }
}
halfIcon

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 | String

5

modelValue

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 | Array

-

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

"medium"

sizesConfig

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

[]

unselectedColor

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

String

-

Events #

NameDescription

update:modelValue

The event is triggered when the component needs to change the model. Is also used by v-model and must be listed after the 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

Change log #

v1.8.0

  • To make rating icons looks better within text we changed default icon size is changed to 18px (or 1rem), small changed to 14px, medium to 18px, large to 24px

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.