Standard Life Digital Framework

Star

full screen new window example HTML markup

The star 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 star buttons on a page as you need, but in most cases either 5 or 10 stars will likely be the proposed number of options. Each star 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 star 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.

Markup: forms\star-input.hbs

Copy

<form>
    <fieldset class="slb-form__group-inline" role="radiogroup" aria-label="Star Example Group">
        <legend>How would you rate your online experience today?</legend>
        <input class="slb-form__control-star" type="radio" id="star1" name="rating" value="1"/>
        <label class="slb-form__label" for="star1" aria-hidden="true"><span class="slb-form__label-star">Awful</span></label>

        <input class="slb-form__control-star" type="radio" id="star2" name="rating" value="2" />
        <label class="slb-form__label" for="star2" aria-hidden="true"><span class="slb-form__label-star">Poor</span></label>

        <input class="slb-form__control-star" type="radio" id="star3" name="rating" value="3" />
        <label class="slb-form__label" for="star3" aria-hidden="true"><span class="slb-form__label-star">Average</span></label>

        <input class="slb-form__control-star" type="radio" id="star4" name="rating" value="4" />
        <label class="slb-form__label" for="star4" aria-hidden="true"><span class="slb-form__label-star">Great</span></label>

        <input class="slb-form__control-star" type="radio" id="star5" name="rating" value="5" />
        <label class="slb-form__label" for="star5" aria-hidden="true"><span class="slb-form__label-star">Excellent</span></label>
    </fieldset>
</form>

Source: components/forms/_form-control-rating.scss