​ ​ ​ Forms - Toggles | Crossroads Digital Design Kit ​
  1. UI COMPONENTS
  2. ATOMS
  3. FORMS

UI Components / Forms

Toggles

Select one option or the other. No option is pre-selected by default. Once an option is touched, a user can return to the unselected state of the component.

The button groups featured in this section have radio button behaviour associated with them. This is achieved by using Bootstrap and adding data-toggle="buttons" the .btn-group parent container. Adding a type="radio" to each input button creates the radio button effect.

Radio bar

Best for limited options, utilizing a single horizontal row.

<div class="form-group">
  <label class="control-label block">Kids welcome?</label>
  <div aria-label="..." class="btn-group btn-group-bar" role="group" data-toggle="buttons">
    <label class="btn btn-default active">
      <input type="radio" autocomplete="off" checked="checked">Yes (Pre-selected)
    </label>
    <label class="btn btn-default">
      <input type="radio" autocomplete="off">No
    </label>
  </div>
</div>

Radio bar (flexbox)

Best for limited options, utilizing a single horizontal row that spans the full width of a column.

<div class="form-group">
  <label class="control-label block">Kids welcome?</label>
  <div aria-label="..." class="btn-group btn-group-bar btn-group-bar-flexbox" role="group" data-toggle="buttons">
    <label class="btn btn-default active">
      <input type="radio" autocomplete="off" checked="checked">Yes (Pre-selected)
    </label>
    <label class="btn btn-default">
      <input type="radio" autocomplete="off">No
    </label>
  </div>
</div>

Radio pills

Use with a single option when horizontal space allows.

The single button toggle featured in this section have interactive behaviour associated with them. This is achieved by using Bootstrap and adding data-toggle="button" the button selector.

<div class="form-group">
  <label class="control-label block">Show</label>
  <div aria-label="..." class="btn-group" role="group">
    <button class="btn btn-default" type="button" data-toggle="button" aria-pressed="false" autocomplete="off">Locations only</button>
  </div>
</div>

Radio pills (block)

Use when vertical space allows.

<div class="form-group">
  <label class="control-label block">Show</label>
  <div aria-label="..." class="btn-group btn-group-block" role="group">
    <button class="btn btn-default" type="button" data-toggle="button" aria-pressed="false" autocomplete="off">Locations only</button>
  </div>
</div>