ラジオボタン

ラジオのレイアウト

ラジオのレイアウトはとてもシンプルです。

<!-- ラジオ要素 -->
<label class="radio">
  <!-- ラジオ入力 -->
  <input type="radio" />
  <!-- ラジオアイコン -->
  <i class="icon-radio"></i>
</label>

ラジオグループ/リスト

ラジオグループ/リストを作成するには、リストビューを使用する必要がありますが、いくつかの追加事項があります。

<div class="list">
  <ul>
    <!-- 単一のラジオアイテム -->
    <li>
      <label class="item-radio item-content">
        <!-- ラジオ入力 -->
        <input type="radio" name="my-radio" value="radio-1" />
        <!-- ラジオアイコン -->
        <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="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 は <label> 要素に item-radio クラスを追加したものでなければなりません。
ラジオ入力 (<input type="radio" />) は、item-content の第一子でなければならない。
ラジオアイコンは、ラジオ入力の後に配置する必要があります。

ラジオアイコンの位置

デフォルトでは、ラジオリストアイテムのアイコンは、iOSテーマではリストアイテムの最後に、MDとAuroraテーマではリストアイテムの最初に表示されます。

この動作をオーバーライドして、ラジオリストアイテムアイコンの位置をリストアイテムの最初または最後に指定することができます。

そのためには、item-radio に item-radio-icon-start や item-radio-icon-end クラスを追加する必要があります。

<!-- item-radio-icon-start" クラスを追加すると、すべてのテーマにおいて、ラジオアイコンがリストアイテムの先頭に表示されます。 -->
<li>
  <!-- item-radio-icon-start "クラスの追加 -->
  <label class="item-radio item-radio-icon-start item-content">
    <!-- ラジオ入力 -->
    <input type="radio" name="my-radio" value="radio-1" />
    <!-- ラジオアイコン -->
    <i class="icon icon-radio"></i>
    <div class="item-inner">
      <!-- ラジオタイトル -->
      <div class="item-title">Books</div>
    </div>
  </label>
</li>

<!-- 追加の "item-radio-icon-end "クラスは、すべてのテーマにおいて、ラジオアイコンをリストアイテムの最後に強制的に表示します。 -->
<li>
  <!-- 追加の "item-radio-icon-end "クラス -->
  <label class="item-radio item-radio-icon-end item-content">
    <!-- ラジオ入力 -->
    <input type="radio" name="my-radio" value="radio-1" />
    <!-- ラジオアイコン -->
    <i class="icon icon-radio"></i>
    <div class="item-inner">
      <!-- ラジオタイトル -->
      <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 .theme-dark,
:root.theme-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>