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
<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