Dependencies
This layout uses the following components as 'atoms' to create the full UI.
Extends: Components:Radio Example
Show the <input type="radio"> on the options component.
<div class="c-options | t-options--radio">
<ul class="c-options__wrapper">
<li class="c-options__item | u-w-50%-@bp2 u-w-25%-@bp3">
<label class="c-options__item-body" for="radio_1">
<input type="radio" name="options" id="radio_1" checked>
<div class="c-options__item-content">
<span class="c-options__content-heading">Option 1</span>
</div>
</label>
</li>
<li class="c-options__item | u-w-50%-@bp2 u-w-25%-@bp3">
<label class="c-options__item-body" for="radio_2">
<input type="radio" name="options" id="radio_2">
<div class="c-options__item-content">
<span class="c-options__content-heading">Option 2</span>
</div>
</label>
</li>
<li class="c-options__item | u-w-50%-@bp2 u-w-25%-@bp3">
<label class="c-options__item-body" for="radio_3">
<input type="radio" name="options" id="radio_3">
<div class="c-options__item-content">
<span class="c-options__content-heading">Option 3</span>
</div>
</label>
</li>
<li class="c-options__item | u-w-50%-@bp2 u-w-25%-@bp3">
<label class="c-options__item-body" for="radio_4">
<input type="radio" name="options" id="radio_4">
<div class="c-options__item-content">
<span class="c-options__content-heading">Option 4</span>
</div>
</label>
</li>
</ul>
</div>Checkbox
Show the <input type="checkbox"> on the options component.
<div class="c-options | t-options--radio">
<ul class="c-options__wrapper">
<li class="c-options__item | u-w-50%-@bp2 u-w-25%-@bp3">
<label class="c-options__item-body" for="check_1">
<input type="checkbox" name="options" id="check_1" checked>
<div class="c-options__item-content">
<span class="c-options__content-heading">Option 1</span>
</div>
</label>
</li>
<li class="c-options__item | u-w-50%-@bp2 u-w-25%-@bp3">
<label class="c-options__item-body" for="check_2">
<input type="checkbox" name="options" id="check_2">
<div class="c-options__item-content">
<span class="c-options__content-heading">Option 2</span>
</div>
</label>
</li>
<li class="c-options__item | u-w-50%-@bp2 u-w-25%-@bp3">
<label class="c-options__item-body" for="check_3">
<input type="checkbox" name="options" id="check_3">
<div class="c-options__item-content">
<span class="c-options__content-heading">Option 3</span>
</div>
</label>
</li>
<li class="c-options__item | u-w-50%-@bp2 u-w-25%-@bp3">
<label class="c-options__item-body" for="check_4">
<input type="checkbox" name="options" id="check_4">
<div class="c-options__item-content">
<span class="c-options__content-heading">Option 4</span>
</div>
</label>
</li>
</ul>
</div>