Dependencies
Uses:Radio Options
Use <input type="radio"> buttons to only allow the user to select 1 option within a bunch of options.
<div class="c-options">
<ul class="c-options__wrapper">
<li class="c-options__item | u-w-50%-@bp2 u-w-25%-@bp3">
<label class="c-options__item-body">
<input class="u-hidden-visually" type="radio" name="options">
<div class="c-options__item-content">
<span class="c-options__content-heading">Option</span>
<p class="c-options__content-body | u-milli">Option Information</p>
</div>
</label>
</li>
<li class="c-options__item | u-w-50%-@bp2 u-w-25%-@bp3">
<label class="c-options__item-body">
<input class="u-hidden-visually" type="radio" name="options">
<div class="c-options__item-content">
<span class="c-options__content-heading">Option</span>
<p class="c-options__content-body | u-milli">Option Information</p>
</div>
</label>
</li>
<li class="c-options__item | u-w-50%-@bp2 u-w-25%-@bp3">
<label class="c-options__item-body">
<input class="u-hidden-visually" type="radio" name="options">
<div class="c-options__item-content">
<span class="c-options__content-heading">Option</span>
<p class="c-options__content-body | u-milli">Option Information</p>
</div>
</label>
</li>
<li class="c-options__item | u-w-50%-@bp2 u-w-25%-@bp3">
<label class="c-options__item-body">
<input class="u-hidden-visually" type="radio" name="options">
<div class="c-options__item-content">
<span class="c-options__content-heading">Option</span>
<p class="c-options__content-body | u-milli">Option Information</p>
</div>
</label>
</li>
</ul>
</div>Checkbox Options
Use <input type="checkbox"> buttons to allow a selection of options.
<div class="c-options">
<ul class="c-options__wrapper">
<li class="c-options__item | u-w-50%-@bp2 u-w-25%-@bp3">
<label class="c-options__item-body">
<input class="u-hidden-visually" type="checkbox" name="options">
<div class="c-options__item-content">
<span class="c-options__content-heading">Option</span>
<p class="c-options__content-body">Option Information</p>
</div>
</label>
</li>
<li class="c-options__item | u-w-50%-@bp2 u-w-25%-@bp3">
<label class="c-options__item-body">
<input class="u-hidden-visually" type="checkbox" name="options">
<div class="c-options__item-content">
<span class="c-options__content-heading">Option</span>
<p class="c-options__content-body">Option Information</p>
</div>
</label>
</li>
<li class="c-options__item | u-w-50%-@bp2 u-w-25%-@bp3">
<label class="c-options__item-body">
<input class="u-hidden-visually" type="checkbox" name="options">
<div class="c-options__item-content">
<span class="c-options__content-heading">Option</span>
<p class="c-options__content-body">Option Information</p>
</div>
</label>
</li>
<li class="c-options__item u-w-50%-@bp2 u-w-25%-@bp3">
<label class="c-options__item-body">
<input class="u-hidden-visually" type="checkbox" name="options">
<div class="c-options__item-content">
<span class="c-options__content-heading">Option</span>
<p class="c-options__content-body">Option Information</p>
</div>
</label>
</li>
</ul>
</div>Use Width Utilities
Use width utilities to control the size of the options themselves.
<!-- 1/2-@bp2 | 1/4-@bp3 -->
<li class="c-options__item | u-w-50%-@bp2 u-w-25%-@bp3">
<label class="c-options__item-body">
<input class="u-hidden-visually" type="radio" name="options">
<div class="c-options__item-content">
<span class="c-options__content-heading">Option</span>
<p class="c-options__content-body">Option Information</p>
</div>
</label>
</li>Content Width
By default the component will take up all available space. To size the entire component based on the content of the options, just set .u-w-content on the parent.
<div class="c-options | u-w-content">
<ul class="c-options__wrapper">
...
</ul>
</div>Edge Cases
When only one option exists in the set, stretching the option may cause the selections to appear overly large. In this case, use half the available width to provide an acceptable limit.
<div class="c-options">
<ul class="c-options__wrapper">
<li class="c-options__item | u-w-50%-@bp2 u-w-25%-@bp3">
<label class="c-options__item-body">
<input class="u-hidden-visually" type="radio" name="options">
<div class="c-options__item-content">
<span class="c-options__content-heading">Option</span>
<p class="c-options__content-body | u-milli">Option Information</p>
</div>
</label>
</li>
</ul>
</div>