Tile
A radio button tile 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 button tiles 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.
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\tile-input.hbs
<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="slb-form__control-tile" id="radioButtonExample-slb-form__control-tile-1" name="radioButtonExample-slb-form__control-tile" aria-checked="true" checked="checked">
<label for="radioButtonExample-slb-form__control-tile-1" class="slb-form__label">
<span class="slb-form__label-heading">Radio tile</span>
<span class="slb-form__label-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, temporibus.</span>
</label>
</div>
<div class="slb-form__group">
<input type="radio" class="slb-form__control-tile" id="radioButtonExample-slb-form__control-tile-2" name="radioButtonExample-slb-form__control-tile" aria-checked="false">
<label for="radioButtonExample-slb-form__control-tile-2" class="slb-form__label">
<span class="slb-form__label-heading">Radio tile</span>
<span class="slb-form__label-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, temporibus.</span>
</label>
</div>
</fieldset>
</form>
Source:
components/forms/_form-control-tile.scss