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

An average shows a half star; the number is in the label and beside the stars.

4.4 from 10 reviews
Show the code
<span class="stars" role="img" aria-label="4.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>
<span class="star-half">
<i class="ti ti-star">
</i>
<i class="ti ti-star on">
</i>
</span>
</span>
<span class="muted fs-sm">4.4 from 10 reviews</span>

Each review

Whole stars for one person’s rating.

5 of 53 of 51 of 5
Show the code
<div class="stack tight">
<span class="cluster gap-2">
<span class="stars" role="img" aria-label="5 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 on">
</i>
</span>
<span class="fs-sm muted">5 of 5</span>
</span>
<span class="cluster gap-2">
<span class="stars" role="img" aria-label="3 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">
</i>
<i class="ti ti-star">
</i>
</span>
<span class="fs-sm muted">3 of 5</span>
</span>
<span class="cluster gap-2">
<span class="stars" role="img" aria-label="1 out of 5 stars">
<i class="ti ti-star on">
</i>
<i class="ti ti-star">
</i>
<i class="ti ti-star">
</i>
<i class="ti ti-star">
</i>
<i class="ti ti-star">
</i>
</span>
<span class="fs-sm muted">1 of 5</span>
</span>
</div>