Button Group Styles
Button Group - Radio
<div aria-label="buttonGroupLabelOne" role="group" class="form__button-group"> <label class="form__button-group__button"> <input type="radio" name="group" checked/> <span>One</span> </label> <label class="form__button-group__button"> <input type="radio" name="group" /> <span>Two</span> </label> <label class="form__button-group__button"> <input type="radio" name="group" /> <span>Three</span> </label> <label class="form__button-group__button"> <input type="radio" name="group" disabled/> <span>Four</span> </label> </div>
Button Group - Checkbox
<div aria-label="buttonGroupLabelTwo" role="group" class="form__button-group"> <label class="form__button-group__button"> <input type="checkbox" name="check" checked/> <span>One</span> </label> <label class="form__button-group__button"> <input type="checkbox" name="check" /> <span>Two</span> </label> <label class="form__button-group__button"> <input type="checkbox" name="check" /> <span>Three</span> </label> <label class="form__button-group__button"> <input type="checkbox" name="check" disabled/> <span>Four</span> </label> </div>