Rating
The rating component is a radio button which is an element representing one of a set of options, only one of which can be selected at any time.
Usage
Place as many rating buttons on a page as you need, If you need more than a group of 5 rating buttons, consider using a select dropdown. Each rating button must have a unique ID and each group of radio buttons must have the same name attribute.
The name of the radio buttons group them together, allowing one radio to be selected at any given time, these are separated with a different id.
The rating buttons should only be used horizontally by using the slb-form__group-inline class
Accessible attributes
| Accessible attribute | Description |
|---|---|
role="radiogroup" |
Container for a group of radio buttons |
aria-checked="false" |
Identifies radio buttons which are not checked. |
aria-checked="true" |
Identifies radio buttons which are checked. |
forms\rating-input.hbs
<form>
<fieldset role="radiogroup" aria-label="Radio Example Group">
<legend class="sr-only">Rating Example Group</legend>
<div class="slb-form__group-inline">
<input type="radio" class="slb-form__control-rating" id="ratingButtonExample-slb-form__control-rating-1" name="ratingButtonExample-slb-form__control-rating" aria-checked="true" checked="checked">
<label for="ratingButtonExample-slb-form__control-rating-1" class="slb-form__label">1</label>
</div>
<div class="slb-form__group-inline">
<input type="radio" class="slb-form__control-rating" id="ratingButtonExample-slb-form__control-rating-2" name="ratingButtonExample-slb-form__control-rating" aria-checked="false">
<label for="ratingButtonExample-slb-form__control-rating-2" class="slb-form__label">2</label>
</div>
<div class="slb-form__group-inline">
<input type="radio" class="slb-form__control-rating" id="ratingButtonExample-slb-form__control-rating-3" name="ratingButtonExample-slb-form__control-rating" aria-checked="false">
<label for="ratingButtonExample-slb-form__control-rating-3" class="slb-form__label">3</label>
</div>
<div class="slb-form__group-inline">
<input type="radio" class="slb-form__control-rating" id="ratingButtonExample-slb-form__control-rating-4" name="ratingButtonExample-slb-form__control-rating" aria-checked="false">
<label for="ratingButtonExample-slb-form__control-rating-4" class="slb-form__label">4</label>
</div>
</fieldset>
</form>
Source:
components/forms/_form-control-rating.scss