2.6.2 #Components.checkbox.group Group
A basic checkbox group. Apply a .sb-checkbox-group
class to the checkbox wrapper.
If you would like to apply validation styles and messages, check out the Form Control component.
Browser support: IE9+, Safari6+, Firefox30+, Chrome30+
Default styling
.sb-checkbox-group--inline
checkbox group aligned horizontally
Markup
<div class="sb-checkbox-group [modifier class]" role="group">
<div class="sb-checkbox">
<input type="checkbox" id="checkbox-4-[modifier class]" class="sb-checkbox__input">
<label class="sb-checkbox__label" for="checkbox-4-[modifier class]">
<span class="sb-checkbox__faux">
<svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
<path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
<span class="sb-checkbox__text">Basic checkbox</span>
</label>
</div>
<div class="sb-checkbox">
<input type="checkbox" id="checkbox-5-[modifier class]" class="sb-checkbox__input">
<label class="sb-checkbox__label" for="checkbox-5-[modifier class]">
<span class="sb-checkbox__faux">
<svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
<path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
<span class="sb-checkbox__text">Basic checkbox</span>
</label>
</div>
<div class="sb-checkbox">
<input type="checkbox" id="checkbox-6-[modifier class]" class="sb-checkbox__input">
<label class="sb-checkbox__label" for="checkbox-6-[modifier class]">
<span class="sb-checkbox__faux">
<svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
<path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
<span class="sb-checkbox__text">Basic checkbox</span>
</label>
</div>
</div>
Source: components/_checkbox.scss, line 174