Ratings
Stars to show or to pick
Show
4.8 from 1,284 reviews
Code
<span class="stars" role="img" aria-label="4 out of 5"><svg class="icon on" viewBox="0 0 24 24" aria-hidden="true">…</svg><svg class="icon on" viewBox="0 0 24 24" aria-hidden="true">…</svg><svg class="icon on" viewBox="0 0 24 24" aria-hidden="true">…</svg><svg class="icon on" viewBox="0 0 24 24" aria-hidden="true">…</svg><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></span>
<span class="stars stars-lg" role="img" aria-label="5 out of 5"><svg class="icon on" viewBox="0 0 24 24" aria-hidden="true">…</svg><svg class="icon on" viewBox="0 0 24 24" aria-hidden="true">…</svg><svg class="icon on" viewBox="0 0 24 24" aria-hidden="true">…</svg><svg class="icon on" viewBox="0 0 24 24" aria-hidden="true">…</svg><svg class="icon on" viewBox="0 0 24 24" aria-hidden="true">…</svg></span>
<span class="fs-sm muted">4.8 from 1,284 reviews</span>Pick
Click a star, or use Tab and Enter.
Code
<div class="rating-input" role="radiogroup" aria-label="Your rating" data-value="3">
<button type="button" role="radio" aria-checked="false" aria-label="1 star" data-on="true" data-value="1"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
<button type="button" role="radio" aria-checked="false" aria-label="2 stars" data-on="true" data-value="2"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
<button type="button" role="radio" aria-checked="true" aria-label="3 stars" data-on="true" data-value="3"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
<button type="button" role="radio" aria-checked="false" aria-label="4 stars" data-on="false" data-value="4"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
<button type="button" role="radio" aria-checked="false" aria-label="5 stars" data-on="false" data-value="5"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
</div>