Radio: Boxed

The boxed radio buttons work exactly like standard radio buttons but have an inline visual style for better distinction.

Default Boxed Radio

<fieldset>
  <div class="input input--radioBoxed">
    <span>
      <input type="radio" checked="checked" name="radio" id="radio1">
      <label for="radio1">
        <span>Radio - Checked</span>
      </label>
    </span>
    <span>
      <input type="radio" name="radio" id="radio2">
      <label for="radio2">
        <span>Radio - Unchecked</span>
      </label>
    </span>
  </div>
  <p class="message">Sorry looks like you choose poorly.</p>
</fieldset>

Disabled Boxed Radio

<fieldset disabled>
  <div class="input input--radioBoxed">
    <span>
      <input type="radio" checked="checked" name="radio" id="radio1">
      <label for="radio1">
        <span>Radio - Checked</span>
      </label>
    </span>
    <span>
      <input type="radio" name="radio" id="radio2">
      <label for="radio2">
        <span>Radio - Unchecked</span>
      </label>
    </span>
  </div>
  <p class="message">Sorry looks like you choose poorly.</p>
</fieldset>

Invalid Boxed Radio

<fieldset class="invalid">
  <div class="input input--radioBoxed">
    <span>
      <input type="radio" checked="checked" name="radio" id="radio1">
      <label for="radio1">
        <span>Radio - Checked</span>
      </label>
    </span>
    <span>
      <input type="radio" name="radio" id="radio2">
      <label for="radio2">
        <span>Radio - Unchecked</span>
      </label>
    </span>
  </div>
  <p class="message">Sorry looks like you choose poorly.</p>
</fieldset>

Boxed Radio - Stacked

<fieldset class="invalid">
  <div class="input input--radioBoxed">
    <span>
      <input type="radio" checked="checked" name="radio" id="radio1">
      <label for="radio1">
        <span>Radio - Checked</span>
      </label>
    </span>
    <span>
      <input type="radio" name="radio" id="radio2">
      <label for="radio2">
        <span>Radio - Unchecked</span>
      </label>
    </span>
  </div>
  <p class="message">Sorry looks like you choose poorly.</p>
</fieldset>