Automatically convert any input to a bootstrap star rating control by setting its class as rating. Note that the CSS class rating-loading when added, hides the input when the page is loading, and shows a plugin loading indicator until the widget is entirely loaded. Also note that you can navigate to the rating via the keyboard and change the ratings using the keyboard RIGHT ARROW and LEFT ARROW keys.

<label for="input-1" class="control-label">Rate This</label>
<input id="input-1" name="input-1" class="rating rating-loading" data-min="0" data-max="5" data-step="1">

Support any fractional rating. For example validate a rating between 1 to 5 with a step of 0.1 for 5 stars. Drag and slide across for changing ratings for better effects on touch input devices.

<label for="input-2" class="control-label">Rate This</label>
<input id="input-2" name="input-2" class="rating rating-loading" data-min="0" data-max="5" data-step="0.1">

A quick shortcut to generate a display only rating is by setting the displayOnly property to true. This can be useful when you wish to render a rating widget for display purpose only and prevent any editing ability for the user.

<table>
  <tr>
    <td style="padding-right:10px">
      <label for="input-3" class="control-label">Likes</label>
    </td>
    <td>
      <input id="input-3" name="input-3" value="4" class="rating-loading">
    </td>
  </tr>
</table>
<script>
$(document).ready(function(){
    $('#input-3').rating({displayOnly: true, step: 0.5});
});
</script>

Use data attributes to control options. For example, hide/show display of clear button and caption.

<label for="input-4" class="control-label">Rate This</label>
<input id="input-4" name="input-4" class="rating rating-loading" data-show-clear="false" data-show-caption="true">

Initialize star control rating on any input via javascript. Note that you must remove the CSS class rating from your input markup when initializing via javascript.

<label for="input-5" class="control-label">Rate This</label>
<input id="input-5" name="input-5" class="rating-loading" data-show-clear="false" data-show-caption="true">
<script>
$(document).ready(function(){
    $('#input-5').rating({clearCaption: 'No stars yet'});
});
</script>

Set the star rating control to be readonly or disabled.

<label for="input-6" class="control-label">Readonly Input</label>
<input id="input-6" name="input-6" class="rating rating-loading" value="0" data-min="0" data-max="5" data-step="1" data-readonly="true">

<label for="input-7" class="control-label">Disabled Input</label>
<input id="input-7" class="rating rating-loading" value="0" data-min="0" data-max="5" data-step="1" data-disabled="true">

Control the size of stars by passing the size parameter. Use these codes in increasing order of size - xs being the smallest and xl being the largest: xs, sm, md, lg, xl.

<label for="input-7-xs" class="control-label">Extra Small Rating</label>
<input id="input-7-xs" class="rating rating-loading" value="1" data-min="0" data-max="5" data-step="0.5" data-size="xs"><hr/>

<label for="input-7-sm" class="control-label">Small Rating</label>
<input id="input-7-sm" class="rating rating-loading" value="2" data-min="0" data-max="5" data-step="0.5" data-size="sm"><hr/>

<label for="input-7-md" class="control-label">Medium Rating</label>
<input id="input-7-md" class="rating rating-loading" value="3" data-min="0" data-max="5" data-step="0.5" data-size="md"><hr/>

<label for="input-7-lg" class="control-label">Large Rating</label>
<input id="input-7-lg" class="rating rating-loading" value="4" data-min="0" data-max="5" data-step="0.5" data-size="lg"><hr/>

<label for="input-7-xl" class="control-label">Extra Large Rating</label>
<input id="input-7-xl" class="rating rating-loading" value="5" data-min="0" data-max="5" data-step="0.5" data-size="xl">

Right to left (RTL) input support. Note that you can add a containerClass for advanced styling.

<input id="input-8" name="input-8" class="rating-loading">
<div class="clearfix"></div>
<script>
$(document).ready(function(){
    $('#input-8').rating({rtl: true, containerClass: 'is-star'});
});
</script>

Example of required attribute validation on the rating input. Try submitting the form without updating the rating. This example also shows a form reset scenario where the rating gets automatically reset to original value, when the form Reset button is clicked

<form action="#basic-example-9" method="post">
    <input id="input-9" name="input-9" required class="rating-loading">
    <hr>
    <button type="submit" class="btn btn-primary">Submit</button>&nbsp;
    <button type="reset" class="btn btn-outline-secondary">Reset</button>
</form>
<script>
$(document).ready(function(){
    $('#input-9').rating();
});
</script>