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>