Guidance
A star rating provides an easy way for users to rate something.
Do
- Use a clear question so users know what they are being asked to rate.
Don’t
- Hide the text labels.
You will need gnb-star-rating-1.0.0.js to use this component.
Star rating
How would you rate your experience today?
HTML
<!-- Star rating -->
<fieldset id="gnb-star-rating">
<legend class="sr-only">Star rating</legend>
<input value="1" id="star1" type="radio" name="rating" class="sr-only">
<label for="star1">
<span class="sr-only">1 out of 5</span>
<i class="fa-solid fa-star"></i>
</label>
<input value="2" id="star2" type="radio" name="rating" class="sr-only">
<label for="star2">
<span class="sr-only">2 out of 5</span>
<i class="fa-solid fa-star"></i>
</label>
<input value="3" id="star3" type="radio" name="rating" class="sr-only">
<label for="star3">
<span class="sr-only">3 out of 5</span>
<i class="fa-solid fa-star"></i>
</label>
<input value="4" id="star4" type="radio" name="rating" class="sr-only">
<label for="star4">
<span class="sr-only">4 out of 5</span>
<i class="fa-solid fa-star"></i>
</label>
<input value="5" id="star5" type="radio" name="rating" class="sr-only">
<label for="star5">
<span class="sr-only">5 out of 5</span>
<i class="fa-solid fa-star"></i>
</label>
<output></output>
</fieldset>