2.30.1 #Components.rating.group Group
A basic rating group. Apply a .sb-rating-group
class to the rating wrapper.
If text is included a {modifier class}
is required.
If you would like to apply validation styles and messages, check out the Form Control component.
Browser support: IE9+, Safari6+, Firefox30+, Chrome30+
Default styling
.sb-rating-group--below
Show text below
.sb-rating-group--above
Show text above
.sb-rating-group--inline
Show text before and after
Markup
<div class="sb-rating-group [modifier class]" role="ratinggroup">
<div class="sb-rating-group__text sb-rating-group__text--low">Not at all</div>
<ul class="sb-rating-group__numbers">
<li class="sb-rating">
<input type="radio" name="rating-group-[modifier class]" id="rating-0-[modifier class]" class="sb-rating__input">
<label class="sb-rating__label" for="rating-0-[modifier class]">0</label>
</li>
<li class="sb-rating">
<input type="radio" name="rating-group-[modifier class]" id="rating-1-[modifier class]" class="sb-rating__input">
<label class="sb-rating__label" for="rating-1-[modifier class]">1</label>
</li>
<li class="sb-rating">
<input type="radio" name="rating-group-[modifier class]" id="rating-2-[modifier class]" class="sb-rating__input">
<label class="sb-rating__label" for="rating-2-[modifier class]">2</label>
</li>
<li class="sb-rating">
<input type="radio" name="rating-group-[modifier class]" id="rating-3-[modifier class]" class="sb-rating__input">
<label class="sb-rating__label" for="rating-3-[modifier class]">3</label>
</li>
<li class="sb-rating">
<input type="radio" name="rating-group-[modifier class]" id="rating-4-[modifier class]" class="sb-rating__input">
<label class="sb-rating__label" for="rating-4-[modifier class]">4</label>
</li>
<li class="sb-rating">
<input type="radio" name="rating-group-[modifier class]" id="rating-5-[modifier class]" class="sb-rating__input">
<label class="sb-rating__label" for="rating-5-[modifier class]">5</label>
</li>
<li class="sb-rating">
<input type="radio" name="rating-group-[modifier class]" id="rating-6-[modifier class]" class="sb-rating__input">
<label class="sb-rating__label" for="rating-6-[modifier class]">6</label>
</li>
<li class="sb-rating">
<input type="radio" name="rating-group-[modifier class]" id="rating-7-[modifier class]" class="sb-rating__input">
<label class="sb-rating__label" for="rating-7-[modifier class]">7</label>
</li>
<li class="sb-rating">
<input type="radio" name="rating-group-[modifier class]" id="rating-8-[modifier class]" class="sb-rating__input">
<label class="sb-rating__label" for="rating-8-[modifier class]">8</label>
</li>
<li class="sb-rating">
<input type="radio" name="rating-group-[modifier class]" id="rating-9-[modifier class]" class="sb-rating__input">
<label class="sb-rating__label" for="rating-9-[modifier class]">9</label>
</li>
<li class="sb-rating">
<input type="radio" name="rating-group-[modifier class]" id="rating-10-[modifier class]" class="sb-rating__input">
<label class="sb-rating__label" for="rating-10-[modifier class]">10</label>
</li>
</ul>
<div class="sb-rating-group__text sb-rating-group__text--high">Very likely</div>
</div>
Source: components/_rating.scss, line 80