Infobox
The checkbox infobox is used when requiring a user to agree to a statement.
Usage
Place the checkbox within a form element. If a group of checkboxes are needed, wrap the group with a role of group
Accessible attributes
| Accessible attribute | Description |
|---|---|
role="group" |
Container for a group of checkboxes |
aria-checked="false" |
Identifies checkboxes which are not checked. |
aria-checked="true" |
Identifies checkboxes which are checked. |
forms\info-input.hbs
<form>
<fieldset role="group" aria-label="Checkbox Example Group">
<legend class="sr-only">Checkbox Example Group</legend>
<div class="slb-form__group">
<input type="checkbox" class="slb-form__control-infobox" id="checkboxButtonExample-slb-form__control-infobox-1" name="checkboxButtonExample-slb-form__control-infobox" aria-checked="true" checked="checked">
<label for="checkboxButtonExample-slb-form__control-infobox-1" class="slb-form__label">
<span class="slb-form__label-heading">Checkbox Infobox</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="checkbox" class="slb-form__control-infobox" id="checkboxButtonExample-slb-form__control-infobox-2" name="checkboxButtonExample-slb-form__control-infobox" aria-checked="false">
<label for="checkboxButtonExample-slb-form__control-infobox-2" class="slb-form__label">
<span class="slb-form__label-heading">Checkbox Infobox</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-infobox.scss