A rating indicates user interest in content


Rating Flexbox

A basic rating


You can use any available icon as rating indicator


You can specify any color of the FUI color palette

Partial Ratings

You can use decimal values for showing partially filled ratings

Partial ratings require jQuery version >3.2 and are only supported by browsers with support for CSS Variables and Gradient Midpoints. Unsupported browsers will use a rounded down value.



A rating can be started in non-interactive mode by adding a disabled class



A rating can vary in size


Setting existing values

The icon can be set either using metadata value data-icon or the setting icon.

The starting rating can be set either using metadata value data-rating or the setting initialRating.

The maximum rating can be be set using the metadata value data-max-rating or the settings maxRating, or you can just include the icon HTML yourself on initialization to avoid the overhead of the DOM template insertions.

If a metadata icon or rating is specified it will automatically override the default value specified in Javascript.
$('.toggle.example .rating') .rating({ initialRating: 2, maxRating: 4 }) ;
New York Dog Fair
A fun day at the fair
Dog Appreciation Day
I'd like to tell your dog he's great

Read-Only Ratings

You can disable or enable interactive rating

$('.toggle.example .rating') .rating('disable') ;
$('.toggle.example .rating') .rating('enable') ;

Clearing Ratings

When clearable is set to true you can clear the rating by clicking on the current start rating.

$('.clearing.example .rating') .rating('setting', 'clearable', true) ;



You can specify the icon, starting rating and max rating in metadata.

$('.ui.rating') .rating() ;


You can specify the icon and rating values in Javascript

$('.ui.rating') .rating({ icon: 'circle', initialRating: 3, maxRating: 5 }) ;

Without Javascript

If you don't need user interaction, you can use the rating module as a pure read-only CSS element


All the following behaviors can be called using the syntax:

$('.ui.rating') .rating('behavior name', argumentOne, argumentTwo) ;
Behavior Description
set rating(rating) Sets rating programmatically
get rating Gets current rating
disable Disables interactive rating mode
enable Enables interactive rating mode
clear rating Clears current rating
destroy Destroys instance and removes all events

Rating Settings
Rating settings modify the rating's behavior

Setting Default Description
icon star The icon classname
initialRating 0 A number representing the default rating to apply
maxRating 4 The maximum rating value
fireOnInit false Whether callbacks like onRate should fire immediately after initializing with the current value.
clearable auto By default a rating will be only clearable if there is 1 icon. Setting to true/false will allow or disallow a user to clear their rating
interactive true Whether to enable user's ability to rate

Callbacks specify a function to occur after a specific behavior.

Setting Context Description
onRate(value) Rating Is called after user selects a new rating

DOM Settings
DOM settings specify how this module should interface with the DOM

Setting Default Description
namespace rating Event namespace. Makes sure module teardown does not effect other events attached to an element.
selector : { icon : '.icon' }
className : { active : 'active', hover : 'hover', loading : 'loading' },

Debug Settings
Debug settings controls debug output to the console

Setting Default Description
name Rating Name used in debug logs
silent false Silences all console output including error messages, regardless of other debug settings.
debug false Provides standard debug output to console
performance true Provides standard debug output to console
verbose false Provides ancillary debug output to console
error : { method : 'The method you called is not defined' }

Dimmer Message
Dimmer sub-header