2.30.1 #Components.rating.group Group

Toggle example guides Toggle HTML markup

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
Not at all
Very likely
.sb-rating-group--below
Show text below
Not at all
Very likely
.sb-rating-group--above
Show text above
Not at all
Very likely
.sb-rating-group--inline
Show text before and after
Not at all
Very likely
Markup 
  1. <div class="sb-rating-group [modifier class]" role="ratinggroup">
  2.   <div class="sb-rating-group__text sb-rating-group__text--low">Not at all</div>
  3.   <ul class="sb-rating-group__numbers">
  4.     <li class="sb-rating">
  5.       <input type="radio" name="rating-group-[modifier class]" id="rating-0-[modifier class]" class="sb-rating__input">
  6.       <label class="sb-rating__label" for="rating-0-[modifier class]">0</label>
  7.     </li>
  8.     <li class="sb-rating">
  9.       <input type="radio" name="rating-group-[modifier class]" id="rating-1-[modifier class]" class="sb-rating__input">
  10.       <label class="sb-rating__label" for="rating-1-[modifier class]">1</label>
  11.     </li>
  12.     <li class="sb-rating">
  13.       <input type="radio" name="rating-group-[modifier class]" id="rating-2-[modifier class]" class="sb-rating__input">
  14.       <label class="sb-rating__label" for="rating-2-[modifier class]">2</label>
  15.     </li>
  16.     <li class="sb-rating">
  17.       <input type="radio" name="rating-group-[modifier class]" id="rating-3-[modifier class]" class="sb-rating__input">
  18.       <label class="sb-rating__label" for="rating-3-[modifier class]">3</label>
  19.     </li>
  20.     <li class="sb-rating">
  21.       <input type="radio" name="rating-group-[modifier class]" id="rating-4-[modifier class]" class="sb-rating__input">
  22.       <label class="sb-rating__label" for="rating-4-[modifier class]">4</label>
  23.     </li>
  24.     <li class="sb-rating">
  25.       <input type="radio" name="rating-group-[modifier class]" id="rating-5-[modifier class]" class="sb-rating__input">
  26.       <label class="sb-rating__label" for="rating-5-[modifier class]">5</label>
  27.     </li>
  28.     <li class="sb-rating">
  29.       <input type="radio" name="rating-group-[modifier class]" id="rating-6-[modifier class]" class="sb-rating__input">
  30.       <label class="sb-rating__label" for="rating-6-[modifier class]">6</label>
  31.     </li>
  32.     <li class="sb-rating">
  33.       <input type="radio" name="rating-group-[modifier class]" id="rating-7-[modifier class]" class="sb-rating__input">
  34.       <label class="sb-rating__label" for="rating-7-[modifier class]">7</label>
  35.     </li>
  36.     <li class="sb-rating">
  37.       <input type="radio" name="rating-group-[modifier class]" id="rating-8-[modifier class]" class="sb-rating__input">
  38.       <label class="sb-rating__label" for="rating-8-[modifier class]">8</label>
  39.     </li>
  40.     <li class="sb-rating">
  41.       <input type="radio" name="rating-group-[modifier class]" id="rating-9-[modifier class]" class="sb-rating__input">
  42.       <label class="sb-rating__label" for="rating-9-[modifier class]">9</label>
  43.     </li>
  44.     <li class="sb-rating">
  45.       <input type="radio" name="rating-group-[modifier class]" id="rating-10-[modifier class]" class="sb-rating__input">
  46.       <label class="sb-rating__label" for="rating-10-[modifier class]">10</label>
  47.     </li>
  48.   </ul>
  49.   <div class="sb-rating-group__text sb-rating-group__text--high">Very likely</div>
  50. </div>
Source: components/_rating.scss, line 80