Radio Toggle Button

Place the .btn class on the label tag to give it button styling. The .btn class is required when using a .btn-group. Can be used with a button modifier class like .btn--secondary.

<div class="form-field form-field--inline">
  <div class="btn-group">
    <input type="radio" id="5" name="radio-inputs-5-6" class="" value="Yes">
    
    <label for="5" class=" btn btn--secondary">Yes</label>
    <input type="radio" id="6" name="radio-inputs-5-6" class="" value="No">
    
    <label for="6" class=" btn btn--secondary">No</label>
  </div>
</div>

<div class="form-field form-field--inline">
  <div class="btn-group">
    <input type="radio" id="7" name="radio-inputs-7-8" class="" value="Yes">
    
    <label for="7" class=" btn btn--secondary">Yes</label>
    <input type="radio" id="8" name="radio-inputs-7-8" class="" value="No" checked>
    
    <label for="8" class=" btn btn--secondary">No</label>
  </div>
</div>

Radio Toggle Button - fluid width

Default

<div class="form-field">
  <div class="btn-group">
    <input type="radio" id="9" name="radio-inputs-9-10" class="" value="Yes">
    
    <label for="9" class=" btn btn--secondary">Yes</label>
    <input type="radio" id="10" name="radio-inputs-9-10" class="" value="No">
    
    <label for="10" class=" btn btn--secondary">No</label>
  </div>
</div>

Selected

<div class="form-field">
  <div class="btn-group">
    <input type="radio" id="11" name="radio-inputs-11-12" class="" value="Yes" checked>
    
    <label for="11" class=" btn btn--secondary">Yes</label>
    <input type="radio" id="12" name="radio-inputs-11-12" class="" value="No">
    
    <label for="12" class=" btn btn--secondary">No</label>
  </div>
</div>

Introduction

Used to display radio input types inline (either as radio inputs or buttons).

Usage