RatingStars component

I just released the first version my RatingStars component. The component displays customizable number of stars for the user to give ratings and also features some client-side animations.

Any comments and bug reports are more than welcome. :slight_smile:

Live demo:






Updated the source link to point to the GitHub project.

Cool stuff! Thanks for that :slight_smile:

I did some small improvements to the RatingStars component today.

I improved the bundled star images and added support for keyboard focusing and navigation (try changing the focus with tab and selecting a rating with left/right arrow keys and enter).

And of course the component is now packaged to be instantly used in Vaadin 6.2+ projects. Just add the jar file to the WEB-INF/lib directory and (re-)compile the widgetset in your Eclipse.

See the updated demo:


Download the jar file:


Great! You got the keyboard handling working pretty nicely now.

Great work on the keyboard support.

Feature request: add support for adding descriptions. I remember adding a description on the server-side for the stars, but it never got shown on the client-side.

Thank you so much for this component, Teemu.

I’ve juste replaced BlackBeltFactory’s star ranking system with it (to be deployed next week).

I’ve two graphical suggestions. I know that we can provide other pictures easily, but I’m a lazy programmer you know, not a graphic designer…

Yellow Background

I’d put a more aggressive gradient: lighter on the top and darker (more orange probably) in the bottom.

Star outline

I’d put a less aggressive outline. Probably mid-grey or dark yellow instead of black.

Probably something similar to this:

It’s probably pretty easy to do for a graphic designer of your team and everybody would benefit.

Would it be an option for you to collect the great graphical customization done by others for your component, and propose all of them in your jar file?

I’ve a question: how do you remove the box around the stars?
It does not look so good on that page:

Great to hear that you found the component useful!

I have plans to do some work on the component later this week. At least I’m planing to update the documentation and add support for value captions that would be displayed when the user hovers his mouse over the different star values. For example (1 = poor, 2 = decent, 3 = good, 4 = excellent, 5 = superb, etc). Better default graphics could also be nice, but I’m more of a programmer myself too. :slight_smile:

The border should be gone if you add the following CSS definition to your theme.

.v-ratingstars-wrapper {
    border: none;

Unfortunately, it does not.
That definition in my .css gets overriden by yours as this fireBug picture shows:


Ah, sorry, didn’t test that CSS myself. But at least with adding “!important” to the CSS it should work, although didn’t test that either. :slight_smile:

.v-ratingstars-wrapper {
    border: none !important;

Good idea; it works. Thank you very much.

New version 1.3 is now released. Major changes in this version are the ability to add separate captions for all the rating values and an improved demo application. Also did some minor CSS fixes.

Please report if you find any bugs in this new release. And of course any other comments are also welcome. :slight_smile:

RatingStars @ Vaadin Directory

Live demo


Great add-on. Thanks for the effort!

Is it possible for users to remove a previously rated item? IE. by clicking on the last start to set it back to zero?

Hope my question makes sense

Thanks in advance



unfortunately with the current version of the component you cannot remove the value by clicking on the current value. As another way to reset the value you could for example add a
component to your application and from its
set the value of the
component to zero.

Button button = new Button("Reset", new Button.ClickListener() {
    public void buttonClick(ClickEvent event) {

Firstly thanks for producing such a cool and useful addon. Really, really like it!

I’ve got a question though- how do I set the background to be transparent?

I’ve tried this in CSS:

/* Removed the border on the RatingStars component */
.v-ratingstars-wrapper {
	border: none !important;
	background:transparent !important;

Which removes the border, but not the background. Is the background coming from the image backgrounds?

Thanks in advance,

Yes, the background color is actually coming from the background image.

The star pattern is actually a transparent “hole” in a white PNG background image on a div element (
). A number of these elements are displayed as an overlay on top of a bar (
) representing the actual value by changing its width accordingly (see the image below). The reason for this is to easily enable the component to display partial stars (for example value of 2.5).

So basically you need to provide your own star background image to change the background color. For more detailed explanation, see this wiki page:


Thanks for the feedback

Hi Teemu,
I’ve found a “bug” of sorts. I’m using another component (Notifique) which displays a browser type message which the user can click to dismiss.

I’m also using RatingStars. I’ve found that both components “compete” for the Z ordering to be at the top. So when a Notifique component slides over a RatingStar component, the stars show up in the Notifque component.

From a user perspective, the popup (Notifque) ought to be the topmost component the user sees, overlaying all others.

Notifque relies on the Overlay component. Should I raise this issue with you or the developer of Notifique?


Hi Anthony,

after a quick look at the Notifique demo it seems that the Notifique has no z-index defined for the notification popups. My guess is that you could fix the problem by assigning a z-index greater than 1 (which is used by RatingStars) to the notifications in your theme.

I might also later see if the RatingStars could work without the z-indexes by reordering the DOM elements. Although, this could lead to issues with the RatingStars component inside a subwindow.

  • Teemu

Gr8 addon. I am trying to bind the value of RatingStars to a property using setPropertyDataSource method. After setting the value, If I retrieve the value from the rating stars field I am getting the right value which means field has been binded to the property. But then it is not reflecting in the UI(empty stars). Only if I use setValue method it is getting reflected in UI.

Please help.


hey Teemu, I used your addon for a web application, and i have some problems with choosing the rating on mobile devices

Can you look over this question and see what is a possible fix for the problem?