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

UI Components / Forms

Radios

One (and only one) option must be selected. No option is pre-selected by default. Once an option is touched, a user cannot 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.

Default radio (stacked)

Being the least mobile-friendly pattern of the category, use with solid rationale.

Consider when labels exceed 44 characters or helper text is necessary for each option.

Helper text if needed

<div class="form-group">
  <label class="control-label block">Label</label>
  <form class="controls-stacked flush-ends">
    <label class="control radio">
      <input checked="checked" id="radio1" name="radio" type="radio">
      <span class="control-indicator"></span>
      Option one is selected
    </label>
    <label class="control radio">
      <input id="radio2" name="radio" type="radio">
      <span class="control-indicator"></span>
      Option two will deselect option one
    </label>
    <label class="control radio disabled">
      <input disabled="disabled" id="radio3" name="radio" type="radio">
      <span class="control-indicator"></span>
      Option three is disabled
    </label>
  </form>
  <p class="help-block hard-top">Helper text if needed</p>
</div>

Radio (inline)

Helper text if needed

<div class="form-group">
  <label class="control-label block">Label</label>
  <div class="controls-inline flush-ends">
    <label class="control radio">
      <input checked="checked" id="radio1" name="radio" type="radio">
      <span class="control-indicator"></span>
      Option 1
    </label>
    <label class="control radio">
      <input id="radio2" name="radio" type="radio">
      <span class="control-indicator"></span>
      Option 2
    </label>
    <label class="control radio disabled">
      <input disabled="disabled" id="radio3" name="radio" type="radio">
      <span class="control-indicator"></span>
      Option 3 (disabled)
    </label>
  </div>
  <p class="help-block hard-top">Helper text if needed</p>
</div>

Radio bar

Best for limited options, utilizing a single horizontal row.

Helper text if needed

<div class="form-group">
  <label class="control-label block">How much?</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">$25 (Pre-selected)
    </label>
    <label class="btn btn-default">
      <input type="radio" autocomplete="off">$50
    </label>
    <label class="btn btn-default">
      <input type="radio" autocomplete="off">$75
    </label>
  </div>
  <p class="help-block">Helper text if needed</p>
</div>

Radio bar (flexbox)

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

Helper text if needed

<div class="form-group">
  <label class="control-label block">How much?</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">$25 (Pre-selected)
    </label>
    <label class="btn btn-default">
      <input type="radio" autocomplete="off">$50
    </label>
    <label class="btn btn-default">
      <input type="radio" autocomplete="off">$75
    </label>
  </div>
  <p class="help-block">Helper text if needed</p>
</div>

Radio pills

Use with many options when horizontal space allows.

Helper text if needed

<div class="form-group">
  <label class="control-label block">Best part of the weekend experience?</label>
  <div aria-label="..." class="btn-group" role="group" data-toggle="buttons">
    <label class="btn btn-default active">
      <input type="radio" autocomplete="off" checked="checked">Seeing friends (Pre-selected)
    </label>
    <label class="btn btn-default">
      <input type="radio" autocomplete="off">Music
    </label>
    <label class="btn btn-default">
      <input type="radio" autocomplete="off">Videos/Media
    </label>
    <label class="btn btn-default">
      <input type="radio" autocomplete="off">Message
    </label>
    <label class="btn btn-default">
      <input type="radio" autocomplete="off">I love it all (seriously)
    </label>
  </div>
  <p class="help-block">Helper text if needed</p>
</div>

Radio pills (block)

Use when vertical space allows.

Helper text if needed

<div class="form-group">
  <label class="control-label block">Best part of the weekend experience?</label>
  <div aria-label="..." class="btn-group btn-group-block" role="group" data-toggle="buttons">
    <label class="btn btn-default active">
      <input type="radio" autocomplete="off" checked="checked">Seeing friends (Pre-selected)
    </label>
    <label class="btn btn-default">
      <input type="radio" autocomplete="off">Music
    </label>
    <label class="btn btn-default">
      <input type="radio" autocomplete="off">Videos/Media
    </label>
    <label class="btn btn-default">
      <input type="radio" autocomplete="off">Message
    </label>
    <label class="btn btn-default">
      <input type="radio" autocomplete="off">I love it all (seriously)
    </label>
  </div>
  <p class="help-block">Helper text if needed</p>
</div>