l2t-paper-rating | Vaadin

Polymer element to display "star" ratings in a paper style

[ This description is mirrored from README.md at github.com/Link2Twenty/l2t-paper-rating on 2019-05-22 ]


A polymer element to display "star" ratings in a paper style

Install with bower

First you need bower, see their site for details

bower install --save l2t-paper-rating


<l2t-paper-rating></l2t-paper-rating> <br/>
<l2t-paper-rating rating="2" readonly></l2t-paper-rating> <br/>
<l2t-paper-rating rating="3" total="4"></l2t-paper-rating>


For screen readers it's helpful to have a label though the traditional label element will not work with custom elements so we'll need to change the aria-label or aria-labelledby properties directly.

There are examples of both methods on the demo page.


The following custom properties are available for styling:

Custom property Description Default
--rating-icon-color The color of the icons --primary-text-color
--rating-icon-size The size of the icon (square) 28px
--rating-icon-padding The size of the padding between icons 2px
--rating-ink-color The color of the ripple on icon tap --primary-text-color
--rating-unselected-opacity The opacity of stars 'non-active' 0.4



Attribute Name Functionality Type Default
icon the icon to use (iron-icons) String star
rating numbers of star selected (reflectToAttribute) Number 1
readonly can the rate be modified Boolean false
total maximum number of stars selectable Number 5


Link to this version
ImportedReleased 05 February 2018MIT License
Framework Support
Polymer 2.0+
Browser Compatibility
Install with
bower install --save Link2Twenty/l2t-paper-rating"#2.0.3"
Run the above Bower command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 2.0.3


  • polymer#Polymer/polymer#^2.0.0
  • paper-icon-button#PolymerElements/paper-icon-button#^2.0.0
  • iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#^2.0.0
  • iron-icons#PolymerElements/iron-icons#^2.0.0