Standard Life Digital Framework

Radio button

full screen new window example HTML markup

A radio button is an element representing one of a set of options, only one of which can be selected at any time.

Usage

Place as many radio buttons on a page as you need, If you need more than a group of 5 radio buttons, consider using a select dropdown. Each radio button must have a unique ID and each group of radio buttons must have the same ID.

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.

To disable the radio button whilst keeping it visible, add the disabled attribute to the form control.

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.

Modifier selectors

Modifier selector	Description
`slb-form__control`	Default form radio button.
`slb-form__control-block`	Block form radio button.

.slb-form__control - Default form control.

.slb-form__control-block - Block form control.

Markup: forms\radio-input.hbs

Copy

<form>
    <fieldset role="radiogroup" aria-label="Radio Example Group">
        <legend class="sr-only">Radio Example Group</legend>
        <div class="slb-form__group">
            <input type="radio" class="[modifier class]" id="radioButtonExample-[modifier class]-1" name="radioButtonExample-[modifier class]" aria-checked="true" checked="checked">
            <label for="radioButtonExample-[modifier class]-1" class="slb-form__label">Radio Button</label>
        </div>
        <div class="slb-form__group">
            <input type="radio" class="[modifier class]" id="radioButtonExample-[modifier class]-2" name="radioButtonExample-[modifier class]" aria-checked="false">
            <label for="radioButtonExample-[modifier class]-2" class="slb-form__label">Radio Button</label>
        </div>
        <div class="slb-form__group">
            <input type="radio" class="[modifier class]" id="radioButtonExample-[modifier class]-4" name="radioButtonExample-[modifier class]" aria-checked="false" disabled>
            <label for="radioButtonExample-[modifier class]-3" class="slb-form__label">Radio Button</label>
        </div>
    </fieldset>
</form>

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