v7.1.5
Support Framework7
logo_github stars forks
logo_applelogo_androiddevice_desktop
sun_max_fillmoon_fill
SponsorsBecome a sponsor
Improve this Doc

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

Radio Icon Position

By default radio list item icon is displayed in the end of the list item in iOS theme, and in the beginning of the list item in MD and Aurora themes.

And it is possible to override this behavior to specify position of radio list item icon - in the beginning or in the end of the list item.

To do this, we need to add additional item-radio-icon-start or item-radio-icon-end class to item-radio:

<!-- Additional "item-radio-icon-start" class will force radio icon to appear in the beginning of the list item for all themes -->
<li>
  <!-- Additional "item-radio-icon-start" class -->
  <label class="item-radio item-radio-icon-start 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>

<!-- Additional "item-radio-icon-end" class will force radio icon to appear in the end of the list item for all themes -->
<li>
  <!-- Additional "item-radio-icon-end" class -->
  <label class="item-radio item-radio-icon-end 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>

CSS Variables

Below is the list of related CSS variables (CSS custom properties).

Note that commented variables are not specified by default and their values is what they fallback to in this case.

:root {
  /*
  --f7-radio-active-color: var(--f7-theme-color);
  */
  --f7-radio-border-radius: 50%;
  --f7-radio-extra-margin: 0px;
}
:root .dark,
:root.dark {
  --f7-radio-inactive-color: rgba(255, 255, 255, 0.3);
}
.ios {
  --f7-radio-size: 22px;
  --f7-radio-border-width: 1px;
  --f7-radio-inactive-color: #c7c7cc;
}
.md {
  --f7-radio-size: 20px;
  --f7-radio-border-width: 2px;
  --f7-radio-inactive-color: #6d6d6d;
}
.aurora {
  --f7-radio-size: 16px;
  --f7-radio-border-width: 1px;
  --f7-radio-inactive-color: rgba(0, 0, 0, 0.25);
}

Examples

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
      <div class="title">Radio</div>
    </div>
  </div>
  <div class="page-content">
    <div class="block-title">Inline</div>
    <div class="block block-strong">
      <p>Lorem <label class="radio"><input type="radio" name="demo-radio-inline" /><i class="icon-radio"></i></label> ipsum do 
        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>
    <div class="block-title">Radio Group</div>
    <div class="block-header">Icon in the beginning of the list item</div>
    <div class="list">
      <ul>
        <li>
          <label class="item-radio item-radio-icon-start item-content">
            <input type="radio" name="demo-radio-start" 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-radio-icon-start item-content">
            <input type="radio" name="demo-radio-start" 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-radio-icon-start item-content">
            <input type="radio" name="demo-radio-start" 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-radio-icon-start item-content">
            <input type="radio" name="demo-radio-start" value="Drinks" />
            <i class="icon icon-radio"></i>
            <div class="item-inner">
              <div class="item-title">Drinks</div>
            </div>
          </label>
        </li>
      </ul>
    </div>
    <div class="block-header">Icon in the end of the list item</div>
    <div class="list">
      <ul>
        <li>
          <label class="item-radio item-radio-icon-end item-content">
            <input type="radio" name="demo-radio-end" 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-radio-icon-end item-content">
            <input type="radio" name="demo-radio-end" 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-radio-icon-end item-content">
            <input type="radio" name="demo-radio-end" 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-radio-icon-end item-content">
            <input type="radio" name="demo-radio-end" value="Drinks" />
            <i class="icon icon-radio"></i>
            <div class="item-inner">
              <div class="item-title">Drinks</div>
            </div>
          </label>
        </li>
      </ul>
    </div>
    <div class="block-title">With Media Lists</div>
    <div class="list media-list">
      <ul>
        <li>
          <label class="item-radio item-radio-icon-start 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 dolor sit amet, consectetur adipiscing elit. Nulla sagittis
                tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum
                sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec
                dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
            </div>
          </label>
        </li>
        <li>
          <label class="item-radio item-radio-icon-start 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 dolor sit amet, consectetur adipiscing elit. Nulla sagittis
                tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum
                sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec
                dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
            </div>
          </label>
        </li>
        <li>
          <label class="item-radio item-radio-icon-start 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 dolor sit amet, consectetur adipiscing elit. Nulla sagittis
                tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum
                sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec
                dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
            </div>
          </label>
        </li>
        <li>
          <label class="item-radio item-radio-icon-start 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 dolor sit amet, consectetur adipiscing elit. Nulla sagittis
                tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum
                sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec
                dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
            </div>
          </label>
        </li>
      </ul>
    </div>
  </div>
</div>