Radio

Radio Layout

Radio layout is pretty simple:

<!-- radio element -->
<label class="radio">
  <!-- radio input -->
  <input type="radio">
  <!-- radio icon -->
  <i class="icon-radio"></i>
</label>

Radio Group/List

To create Radio group/list we need to use List View with few additions:

<div class="list">
  <ul>
    <!-- Single radio item -->
    <li>
      <label class="item-radio item-content">
        <!-- Radio input -->
        <input type="radio" name="my-radio" value="radio-1"/>
        <!-- Radio icon -->
        <i class="icon icon-radio"></i>
        <div class="item-inner">
          <!-- Radio Title -->
          <div class="item-title">Books</div>
        </div>
      </label>
    </li>
    <!-- Another radio item -->
    <li>
      <label class="item-radio item-content">
        <!-- Checked by default -->
        <input type="radio" name="my-radio" value="radio-2" checked/>
        <i class="icon icon-radio"></i>
        <div class="item-inner">
          <div class="item-title">Music</div>
        </div>
      </label>
    </li>
    ...
  </ul>
</div>

• item-content must be a **<label>** element with additional **item-radio** class
• Radio input (<input type="radio">) must be a first child of item-content
• Radio icon must be after radio input

Examples

Inline

<div class="block block-strong">
  <p>Lorem <label class="radio"><input type="radio" name="demo-radio-inline"><i class="icon-radio"></i></label> ipsum dolor sit amet, consectetur adipisicing elit. Alias beatae illo nihil aut eius commodi sint eveniet aliquid eligendi <label class="radio"><input type="radio" name="demo-radio-inline"><i class="icon-radio"></i></label> ad delectus impedit tempore nemo, enim vel praesentium consequatur nulla mollitia!</p>
</div>

Radio Group

<div class="list">
  <ul>
    <li>
      <label class="item-radio item-content">
        <input type="radio" name="demo-radio" value="Books" checked />
        <i class="icon icon-radio"></i>
        <div class="item-inner">
          <div class="item-title">Books</div>
        </div>
      </label>
    </li>
    <li>
      <label class="item-radio item-content">
        <input type="radio" name="demo-radio" value="Movies"/>
        <i class="icon icon-radio"></i>
        <div class="item-inner">
          <div class="item-title">Movies</div>
        </div>
      </label>
    </li>
    <li>
      <label class="item-radio item-content">
        <input type="radio" name="demo-radio" value="Food"/>
        <i class="icon icon-radio"></i>
        <div class="item-inner">
          <div class="item-title">Food</div>
        </div>
      </label>
    </li>
    <li>
      <label class="item-radio item-content">
        <input type="radio" name="demo-radio" value="Drinks"/>
        <i class="icon icon-radio"></i>
        <div class="item-inner">
          <div class="item-title">Drinks</div>
        </div>
      </label>
    </li>
  </ul>
</div>

With Media Lists

<div class="list media-list">
  <ul>
    <li>
      <label class="item-radio item-content">
        <input type="radio" name="demo-media-radio" value="1" checked />
        <i class="icon icon-radio" checked></i>
        <div class="item-inner">
          <div class="item-title-row">
            <div class="item-title">Facebook</div>
            <div class="item-after">17:14</div>
          </div>
          <div class="item-subtitle">New messages from John Doe</div>
          <div class="item-text">Lorem ipsum ...</div>
        </div>
      </label>
    </li>
    <li>
      <label class="item-radio item-content">
        <input type="radio" name="demo-media-radio" value="2"/>
        <i class="icon icon-radio"></i>
        <div class="item-inner">
          <div class="item-title-row">
            <div class="item-title">John Doe (via Twitter)</div>
            <div class="item-after">17:11</div>
          </div>
          <div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
          <div class="item-text">Lorem ipsum ...</div>
        </div>
      </label>
    </li>
    <li>
      <label class="item-radio item-content">
        <input type="radio" name="demo-media-radio" value="3"/>
        <i class="icon icon-radio"></i>
        <div class="item-inner">
          <div class="item-title-row">
            <div class="item-title">Facebook</div>
            <div class="item-after">16:48</div>
          </div>
          <div class="item-subtitle">New messages from John Doe</div>
          <div class="item-text">Lorem ipsum ...</div>
        </div>
      </label>
    </li>
    <li>
      <label class="item-radio item-content">
        <input type="radio" name="demo-media-radio" value="4"/>
        <i class="icon icon-radio"></i>
        <div class="item-inner">
          <div class="item-title-row">
            <div class="item-title">John Doe (via Twitter)</div>
            <div class="item-after">15:32</div>
          </div>
          <div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
          <div class="item-text">Lorem ipsum ...</div>
        </div>
      </label>
    </li>
  </ul>
</div>