Rating
Rating components help you get customer feedback quickly. Dazzle UI has 3 different types of rating formats.
Star Rating
Star rating is widely used and help user rate the service/item in range of 1-5 stars. Hover and Click on the rating icons to mark you rating.
<div class="rating-group">
<label aria-label="1 star" class="rating-label" for="rating-1">
<i class="rating-icon rating-icon--star fa fa-star"></i>
</label>
<input class="rating-input" name="rating" id="rating-1" value="1" type="radio">
<label aria-label="2 stars" class="rating-label" for="rating-2">
<i class="rating-icon rating-icon--star fa fa-star"></i>
</label>
<input class="rating-input" name="rating" id="rating-2" value="2" type="radio">
<label aria-label="3 stars" class="rating-label" for="rating-3">
<i class="rating-icon rating-icon--star fa fa-star"></i>
</label>
<input class="rating-input" name="rating" id="rating-3" value="3" type="radio">
<label aria-label="4 stars" class="rating-label" for="rating-4">
<i class="rating-icon rating-icon--star fa fa-star"></i>
</label>
<input class="rating-input" name="rating" id="rating-4" value="4" type="radio">
<label aria-label="5 stars" class="rating-label" for="rating-5">
<i class="rating-icon rating-icon--star fa fa-star"></i>
</label>
<input class="rating-input" name="rating" id="rating-5" value="5" type="radio">
</div>
Thumb Rating
Customer likes and dislikes can be easily recorded using thumb ratings. Hover and Click on the rating icons to mark you rating.
<div class="thumb-group gap-2">
<input type="radio" class="thumb-rating" name="thumb-rating" id="thumbs-up" value="like">
<label class="like" for="thumbs-up">
<i class="fa fa-thumbs-up fa-3x" aria-hidden="true"></i>
<legend class="mt-1">Like it</legend>
</label>
<input type="radio" class="thumb-rating" name="thumb-rating" id="thumbs-down" value="dislike">
<label class="dislike" for="thumbs-down">
<i class="fa fa-thumbs-down fa-3x" aria-hidden="true"></i>
<legend class="mt-1">Hate it</legend>
</label>
</div>
Face / Expression Rating
Emojis help customer express their feeling easily. We have 4 expression for rating. Hover and Click on the rating icons to mark you rating.
<div class="face-group gap-1 mt-1p5">
<input type="radio" class="face-rating" name="face-rating" id="excellent" value="excellent">
<label class="excellent text-center" for="excellent">
<div class="text-3xl">😍</div>
<legend class="m-0p5">Excellent</legend>
</label>
<input type="radio" class="face-rating" name="face-rating" id="good" value="good">
<label class="good text-center" for="good">
<div class="text-3xl">😄</div>
<legend class="m-0p5">Good</legend>
</label>
<input type="radio" class="face-rating" name="face-rating" id="okay" value="okay">
<label class="okay text-center" for="okay">
<div class="text-3xl">🙁</div>
<legend class="m-0p5">Okay</legend>
</label>
<input type="radio" class="face-rating" name="face-rating" id="bad" value="bad">
<label class="bad text-center" for="bad">
<div class="text-3xl">😡</div>
<legend class="m-0p5">Bad</legend>
</label>
</div>