Register

Ratings

Stars to give, and stars shown

Give a rating

Five radio buttons in a group: arrow keys change it.

Rate your visit
Show the code
<fieldset class="rate">
<legend class="sr-only">Rate your visit</legend>
<input type="radio" name="rate" id="rate-5" value="5">
<label for="rate-5" aria-label="5 stars">
<i class="ti ti-star">
</i>
</label>
<input type="radio" name="rate" id="rate-4" value="4" checked>
<label for="rate-4" aria-label="4 stars">
<i class="ti ti-star">
</i>
</label>
<input type="radio" name="rate" id="rate-3" value="3">
<label for="rate-3" aria-label="3 stars">
<i class="ti ti-star">
</i>
</label>
<input type="radio" name="rate" id="rate-2" value="2">
<label for="rate-2" aria-label="2 stars">
<i class="ti ti-star">
</i>
</label>
<input type="radio" name="rate" id="rate-1" value="1">
<label for="rate-1" aria-label="1 star">
<i class="ti ti-star">
</i>
</label>
</fieldset>

Show a rating

The number is in the label.

4.4 from 128 reviews
Show the code
<span class="stars" role="img" aria-label="4 out of 5 stars">
<i class="ti ti-star on">
</i>
<i class="ti ti-star on">
</i>
<i class="ti ti-star on">
</i>
<i class="ti ti-star on">
</i>
<i class="ti ti-star">
</i>
</span>
<span class="muted fs-sm">4.4 from 128 reviews</span>