A rating indicates user interest in content



Rating Flexbox

A basic rating


A rating can use a set of star icons



A rating can use a set of heart icons



A rating can vary in size


Setting existing values

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 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 starting rating, and max rating in metadata.

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


You can specify the rating values in Javascript

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


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

Rating Settings
Rating settings modify the rating's behavior

Setting Default Description
initialRating 0 A number representing the default rating to apply
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 True Provides ancillary debug output to console
error : { action : 'You called a rating action that was not defined' }

Dimmer Message
Dimmer sub-header