v6.3.3
Support Framework7
logo_github stars forks
logo_applelogo_androiddevice_desktop
スポンサー
Support Framework7

入力 / フォーム入力

    フォーム入力を使用すると、柔軟で美しいフォームレイアウトを作成することができます。

    入力物のレイアウト

    入力はリストビューで使用することをお勧めします。

    <div class="list">
  <ul>
    ...
    <li class="item-content item-input">
      <div class="item-media">... icon/image here ...</div>
      <div class="item-inner">
        <div class="item-input-wrap">
          <input type="text" name="name" />
          <span class="input-clear-button"></span>
        </div>
      </div>
    </li>
    ...
  </ul>
</div>

    構造

    • item-input - item-content の必須の追加クラスです。入力アイテムを正しくレイアウトするために必要です。

    • item-label - item-title に追加されるクラスで、ラベルを正しく表示するために必要です。

    • item-input-wrap - 必須の追加入力ラッパーです。item-inner` の直接の子でなければなりません。

    • <span class="input-clear-button"> - クリックすると入力値をクリアするボタンです。Optional

    スタックラベル

    デフォルトでは、入力リストは積み重ねられたラベルで表示されます。積み重ねられたラベルは常に入力の上に表示されます。

    <div class="list">
  <ul>
    ...
    <li class="item-content item-input">
      <div class="item-media">... icon/image here ...</div>
      <div class="item-inner">
        <div class="item-title item-label">Name</div>
        <div class="item-input-wrap">
          <input type="text" name="name" />
          <span class="input-clear-button"></span>
        </div>
      </div>
    </li>
    ...
  </ul>
</div>

    構造

    • item-title item-label - 入力ラベル

    インラインラベル

    インラインラベルを使用したい場合は、リスト全体に inline-labels クラスを追加するか、単一のアイテムに inline-label クラスを追加します。

    <div class="list inline-labels">
  <ul>
    ...
    <li class="item-content item-input">
      <div class="item-media">... icon/image here ...</div>
      <div class="item-inner">
        <div class="item-title item-label">Name</div>
        <div class="item-input-wrap">
          <input type="text" name="name" />
          <span class="input-clear-button"></span>
        </div>
      </div>
    </li>
    ...
  </ul>
</div>
<!-- または、単一のアイテムに -->
<div class="list">
  <ul>
    ...
    <!-- インラインラベル」クラスの追加 -->
    <li class="item-content item-input inline-label">
      ...
    </li>
    ...
  </ul>
</div>

    フローティングラベル

    フローティングラベルを追加するには、item-labelではなく、item-floating-labelクラスを使う必要があります。

    <div class="list">
  <ul>
    ...
    <li class="item-content item-input">
      <div class="item-media">... icon/image here ...</div>
      <div class="item-inner">
        <!-- "item-floating-label" class on item title -->
        <div class="item-title item-floating-label">Name</div>
        <div class="item-input-wrap">
          <input type="text" name="name" />
          <span class="input-clear-button"></span>
        </div>
      </div>
    </li>
    ...
  </ul>
</div>

    アウトライン入力

    入力をアウトライン化するには、メインのリスト入力要素に item-input-outline クラスを追加する必要があります。

    <div class="list">
  <ul>
    ...
    <!-- 追加の "item-input-outline" クラス -->
    <li class="item-content item-input item-input-outline">
      <div class="item-inner">
        <div class="item-title item-label">Name</div>
        <div class="item-input-wrap">
          <input type="text" name="name" />
          <span class="input-clear-button"></span>
        </div>
      </div>
    </li>
    ...
  </ul>
</div>

    アイテム情報

    また、フォームの入力に関する情報を追加することもできます。

    <div class="list">
  <ul>
    ...
    <!-- itemに "item-input-with-info "クラスを追加します。 -->
    <li class="item-content item-input item-input-with-info">
      <div class="item-media">... icon/image here ...</div>
      <div class="item-inner">
        <div class="item-title item-label">Name</div>
        <div class="item-input-wrap">
          <input type="text" name="name" />
          <span class="input-clear-button"></span>
          <!-- 要素に追加情報を表示します。 -->
          <div class="item-input-info">Some information about input field</div>
        </div>
      </div>
    </li>
    ...
  </ul>
</div>

    構造

    • item-input-with-info - 入力項目に必須の追加クラスです。

    • <div class="item-input-info">...</div> - 付加情報を持つ要素

    ドロップダウン入力

    追加の input-dropdown-wrap クラスを使って、（select のような）ドロップダウン入力を示すことも可能です。右側に小さなドロップダウンアイコン(▼)が追加されます。

    <div class="list">
  <ul>
    ...
    <li class="item-content item-input">
      <div class="item-media">... icon/image here ...</div>
      <div class="item-inner">
        <div class="item-title item-label">Name</div>
        <!-- 追加の「input-dropdown-wrap」クラス -->
        <div class="item-input-wrap input-dropdown-wrap">
          <select>
            ...
          </select>
        </div>
      </div>
    </li>
    ...
  </ul>
</div>

    対応する入力要素

    以下は、item-input-wrapの中に入れることができる入力要素の一覧です。

    すべてのテキスト入力Supported types: text, password, email, tel, url, date, number, datetime-local
    ...
  <div class="item-input-wrap">
    <input type="text" />
  </div>
...
...
  <div class="item-input-wrap">
    <input type="email" />
  </div>
...
    選択
    ...
  <div class="item-input-wrap">
    <select>...</select">
  </div>
...
    テキストエリア
    ...
  <div class="item-input-wrap">
    <textarea></textarea>
  </div>
...
    レンジスライダー
    ...
  <div class="item-input-wrap">
    <div class="range-slider">
      <input type="range" min="0" max="100" step="0.1" />
    </div>
  </div>
...

    サイズ変更可能なテキストエリア

    テキストエリアのサイズをコンテンツに応じて自動的に変更するには、resizableクラスを追加します。

    <textarea class="resizable"></textarea>

    バリデーション

    Framework7では、HTML5のバリデーションを、validity入力プロパティに基づいてサポートしています。バリデーションを有効にすると、入力値が無効な場合にバリデーションのエラーメッセージが表示されるようになります。

    バリデーションを有効にするには、input 要素に required と validate 属性を追加する必要があります。

    もしも blur イベントの際に only 入力の検証が必要であれば、data-validate-on-blur="true" 属性を追加する必要があります。

    値の検証は入力の type に依存します。例えば、input type="email" は email パターンにマッチするかどうか検証されます。これはブラウザのデフォルトの動作です。入力値を検証するためにカスタムルールを追加したい場合には、pattern入力属性を使って行う必要があります。

    <!-- デフォルトのバリデーションでは、値が空でないことをチェックします。 -->
<input type="text" placeholder="Your name" required validate />

<!-- デフォルトのEメールバリデーション、値がEメールであることをチェックする -->
<input type="email" placeholder="Your e-mail" required validate />

<!-- デフォルトのURL検証 -->
<input type="url" placeholder="Your URL" required validate />

<!-- パターン検証、値は "apple "または "banana "でなければなりません。 -->
<input type="text" required validate pattern="apple|banana" placeholder="Type 'apple' or 'banana'" />

<!-- パターン検証（カスタムエラーメッセージ付き）、値は数字のみであること -->
<input type="text" placeholder="Enter number" required validate pattern="[0-9]*" data-error-message="Only numbers please!" />

<!-- この入力はblurの時のみ検証されます。 -->
<input type="text" placeholder="Your name" required validate data-validate-on-blur="true" />

    入力状態クラス

    input要素には、その状態や内容に応じて、いくつかのクラスを追加することができます。

    • input-with-value - 値があるときに入力に追加されます。
    • input-focused - フォーカスされたときに入力に追加されます。
    • input-invalid - 値が有効でないときに追加されます。

    同じ状態がinputの親である item-input 要素にも追加されます。

    • item-input-with-value - 入力が値を持つときに、入力アイテムに追加されます。
    • item-input-focused - 入力がフォーカスされたときに、入力アイテムに追加されます。
    • item-input-invalid - 入力された値が有効でないときに、入力項目に追加されます。

    入力アプリのパラメータ

    グローバルアプリパラメータを使って、デフォルトの入力動作を制御することができます。このアプリパラメータでは、入力関連のパラメータを input プロパティに渡すことができます。

    ParameterTypeDefaultDescription
    scrollIntoViewOnFocusbooleanこれを有効にすると、入力フォーカス時に入力をスクロールして表示します。デフォルトでは、アンドロイド端末でのみ有効になっています。これは、オンスクリーンキーボードが入力に重なる場合の問題を解決するのに役立ちます。
    scrollIntoViewCenteredbooleanfalse入力フォーカス時に入力を視界の中心にスクロールする前のパラメータの動作を調整しました。
    scrollIntoViewDurationnumber0入力を画面内にスクロールする際のデフォルトの時間
    scrollIntoViewAlwaysbooleanfalse有効にすると、入力が画面の外にあってもなくても、画面内にスクロールします。

    例：

    var app = new Framework7({
  input: {
    scrollIntoViewOnFocus: true,
    scrollIntoViewCentered: true,
  }
});

    入力アプリのメソッド

    入力を制御するために、以下のアプリのメソッドが利用できます。

    app.input.scrollIntoView(inputEl, duration, centered, force)入力をスクロールして表示する
    • inputEl - ビューに入れるために必要な入力要素のHTMLElementまたはstring（CSSセレクタ付き）。必須
    • duration - number - スクロールの継続時間（単位：ミリ秒）。
    • centered - boolean - ビューの中心にスクロールさせなければならないかどうかを定義します。
    • force - boolean - 入力が画面の外にあってもなくても、画面内にスクロールさせます。
    app.input.focus(inputEl)入力がフォーカスされたときのように、必要なスタイルやクラスが追加されます。
    • inputEl - 必須の入力要素のHTMLElementまたはstring（CSSセレクタ付き）。必須です。
    app.input.blur(inputEl)入力要素がフォーカスを失ったときなどに、追加の必須スタイルやクラスを削除します。
    • inputEl - 必須入力要素の HTMLElement または string (with CSS Selector) です。必須です。
    app.input.resizeTextarea(textareaEl)サイズ変更可能なtextareaを内容に応じて強制的にサイズ変更する
    • textareaEl - 必須のtextarea要素のHTMLElementまたはstring（CSSセレクタ付き）。必須。
    app.input.checkEmptyState(inputEl)入力要素が値を持つかどうかに基づいて、必要な追加スタイルとクラスを再計算する
    • inputEl - 必須のtextarea要素のHTMLElementまたはstring（CSSセレクタ付き）のこと。必須です。
    app.input.validate(inputEl)入力を検証する
    • inputEl - 必須のtextarea要素のHTMLElementまたはstring(CSSセレクタ付き)。必須です。
    • メソッドは、入力が有効な場合は true を、入力が有効でない場合は false を返します。
    app.input.validateInputs(containerEl)渡されたコンテナ内のすべての入力を検証します。
    • containerEl - HTMLElement または string (with CSS Selector) 検証するために必要な、内部に入力がある要素の名前。必須です。
    • メソッドは、すべての子の入力が有効な場合は true を、少なくとも1つの入力が有効でない場合は false を返します。

    入力のイベント

    入力では、以下のDOMイベントが発生します。 input要素。

    EventTargetDescription
    textarea:resizeTextarea Element<textarea class="resizable">イベントは、サイズ変更可能なtextareaのサイズが変更された後に発生します。event.detailには、initialHeight、currentHeight、scrollHeight`のプロパティを持つオブジェクトが含まれます。
    input:notemptyInput Element<input/textarea>入力値が空でなくなるとイベントが発生します。
    input:emptyInput Element<input/textarea>入力値が空になったときにイベントが発生します。
    input:clearInput Element<input/textarea>入力クリアボタンをクリックして、入力値がクリアされると、イベントが発生します。

    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-input-bg-color: transparent;
  --f7-label-font-weight: 400;
  --f7-label-line-height: 1.3;
  --f7-input-padding-left: 0px;
  --f7-input-padding-right: 0px;
  --f7-input-error-text-color: #ff3b30;
  --f7-input-error-font-size: 12px;
  --f7-input-error-line-height: 1.4;
  --f7-input-error-font-weight: 400;
  --f7-input-info-font-size: 12px;
  --f7-input-info-line-height: 1.4;
  --f7-input-outline-height: 40px;
  --f7-input-outline-border-radius: 4px;
  --f7-input-outline-padding-horizontal: 12px;
  --f7-textarea-height: 100px;
  /*
  --f7-input-outline-focused-border-color: var(--f7-theme-color);
  --f7-input-outline-invalid-border-color: var(--f7-input-error-text-color);
  */
  --f7-input-outline-border-color: #bbb;
}
:root .theme-dark,
:root.theme-dark {
  --f7-input-outline-border-color: #444;
}
.ios {
  --f7-input-height: 44px;
  --f7-input-font-size: 17px;
  --f7-input-placeholder-color: #a9a9a9;
  --f7-textarea-padding-vertical: 11px;
  /*
  --f7-input-focused-border-color: var(--f7-list-item-border-color);
  --f7-input-invalid-border-color: var(--f7-list-item-border-color);
  --f7-input-invalid-text-color: var(--f7-input-error-text-color);
  */
  --f7-label-font-size: 12px;
  --f7-label-text-color: inherit;
  /*
  --f7-label-focused-text-color: var(--f7-label-text-color);
  --f7-label-invalid-text-color: var(--f7-label-text-color);
  */
  --f7-floating-label-scale: calc(17 / 12);
  --f7-inline-label-font-size: 17px;
  --f7-inline-label-line-height: 1.4;
  --f7-inline-label-padding-top: 3px;
  --f7-input-clear-button-size: 14px;
  --f7-input-text-color: #000000;
  --f7-input-info-text-color: rgba(0, 0, 0, 0.45);
  --f7-input-clear-button-color: rgba(0, 0, 0, 0.45);
}
.ios .theme-dark,
.ios.theme-dark {
  --f7-input-text-color: #fff;
  --f7-input-info-text-color: rgba(255, 255, 255, 0.55);
  --f7-input-clear-button-color: rgba(255, 255, 255, 0.5);
}
.md {
  --f7-input-height: 36px;
  --f7-input-font-size: 16px;
  --f7-textarea-padding-vertical: 7px;
  /*
  --f7-input-focused-border-color: var(--f7-theme-color);
  --f7-input-invalid-border-color: var(--f7-input-error-text-color);
  --f7-input-invalid-text-color: var(--f7-input-text-color);
  */
  --f7-label-font-size: 12px;
  /*
  --f7-label-focused-text-color: var(--f7-theme-color);
  --f7-label-invalid-text-color: var(--f7-input-error-text-color );
  */
  --f7-floating-label-scale: calc(16 / 12);
  --f7-inline-label-font-size: 16px;
  --f7-inline-label-line-height: 1.5;
  --f7-inline-label-padding-top: 7px;
  --f7-input-clear-button-size: 18px;
  --f7-input-clear-button-color: #aaa;
  --f7-input-text-color: #212121;
  --f7-input-placeholder-color: rgba(0, 0, 0, 0.35);
  --f7-label-text-color: rgba(0, 0, 0, 0.65);
  --f7-input-info-text-color: rgba(0, 0, 0, 0.45);
}
.md .theme-dark,
.md.theme-dark {
  --f7-input-text-color: rgba(255, 255, 255, 0.87);
  --f7-input-placeholder-color: rgba(255, 255, 255, 0.35);
  --f7-label-text-color: rgba(255, 255, 255, 0.54);
  --f7-input-info-text-color: rgba(255, 255, 255, 0.45);
}
.aurora {
  --f7-input-height: 32px;
  --f7-input-font-size: 16px;
  --f7-textarea-padding-vertical: 4px;
  /*
  --f7-input-focused-border-color: var(--f7-theme-color);
  --f7-input-invalid-border-color: var(--f7-input-error-text-color);
  --f7-input-invalid-text-color: var(--f7-input-text-color);
  */
  --f7-label-font-size: 12px;
  --f7-label-text-color: inherit;
  /*
  --f7-label-focused-text-color: var(--f7-theme-color);
  --f7-label-invalid-text-color: var(--f7-input-error-text-color );
  */
  --f7-floating-label-scale: calc(16 / 12);
  --f7-inline-label-font-size: 16px;
  --f7-inline-label-line-height: 1.5;
  --f7-inline-label-padding-top: 4px;
  --f7-input-clear-button-size: 14px;
  --f7-input-outline-border-radius: 8px;
  --f7-input-text-color: #000000;
  --f7-input-placeholder-color: rgba(0, 0, 0, 0.32);
  --f7-input-clear-button-color: rgba(0, 0, 0, 0.45);
  --f7-input-info-text-color: rgba(0, 0, 0, 0.5);
}
.aurora .theme-dark,
.aurora.theme-dark {
  --f7-input-text-color: #fff;
  --f7-input-clear-button-color: rgba(255, 255, 255, 0.5);
  --f7-input-placeholder-color: rgba(255, 255, 255, 0.35);
  --f7-input-info-text-color: rgba(255, 255, 255, 0.45);
}

    Examples

    <template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Form Inputs</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block-title">Full Layout / Inline Labels</div>
      <div class="list inline-labels no-hairlines-md">
        <ul>
          <li class="item-content item-input">
            <div class="item-media">
              <i class="icon demo-list-icon"></i>
            </div>
            <div class="item-inner">
              <div class="item-title item-label">Name</div>
              <div class="item-input-wrap">
                <input type="text" placeholder="Your name" />
                <span class="input-clear-button"></span>
              </div>
            </div>
          </li>
          <li class="item-content item-input">
            <div class="item-media">
              <i class="icon demo-list-icon"></i>
            </div>
            <div class="item-inner">
              <div class="item-title item-label">Password</div>
              <div class="item-input-wrap">
                <input type="password" placeholder="Your password" />
                <span class="input-clear-button"></span>
              </div>
            </div>
          </li>
          <li class="item-content item-input">
            <div class="item-media">
              <i class="icon demo-list-icon"></i>
            </div>
            <div class="item-inner">
              <div class="item-title item-label">E-mail</div>
              <div class="item-input-wrap">
                <input type="email" placeholder="Your e-mail" />
                <span class="input-clear-button"></span>
              </div>
            </div>
          </li>
          <li class="item-content item-input">
            <div class="item-media">
              <i class="icon demo-list-icon"></i>
            </div>
            <div class="item-inner">
              <div class="item-title item-label">URL</div>
              <div class="item-input-wrap">
                <input type="url" placeholder="URL" />
                <span class="input-clear-button"></span>
              </div>
            </div>
          </li>
          <li class="item-content item-input">
            <div class="item-media">
              <i class="icon demo-list-icon"></i>
            </div>
            <div class="item-inner">
              <div class="item-title item-label">Phone</div>
              <div class="item-input-wrap">
                <input type="tel" placeholder="Your phone number" />
                <span class="input-clear-button"></span>
              </div>
            </div>
          </li>
          <li class="item-content item-input">
            <div class="item-media">
              <i class="icon demo-list-icon"></i>
            </div>
            <div class="item-inner">
              <div class="item-title item-label">Gender</div>
              <div class="item-input-wrap input-dropdown-wrap">
                <select placeholder="Please choose...">
                  <option value="Male">Male</option>
                  <option value="Female">Female</option>
                </select>
              </div>
            </div>
          </li>
          <li class="item-content item-input">
            <div class="item-media">
              <i class="icon demo-list-icon"></i>
            </div>
            <div class="item-inner">
              <div class="item-title item-label">Birthday</div>
              <div class="item-input-wrap">
                <input type="date" value="2014-04-30" placeholder="Please choose..." />
              </div>
            </div>
          </li>
          <li class="item-content item-input">
            <div class="item-media">
              <i class="icon demo-list-icon"></i>
            </div>
            <div class="item-inner">
              <div class="item-title item-label">Date time</div>
              <div class="item-input-wrap">
                <input type="datetime-local" placeholder="Please choose..." />
              </div>
            </div>
          </li>
          <li class="item-content item-input">
            <div class="item-media">
              <i class="icon demo-list-icon"></i>
            </div>
            <div class="item-inner">
              <div class="item-title item-label">Range</div>
              <div class="item-input-wrap">
                <div class="range-slider range-slider-init" data-label="true">
                  <input type="range" value="50" min="0" max="100" step="1" />
                </div>
              </div>
            </div>
          </li>
          <li class="item-content item-input">
            <div class="item-media">
              <i class="icon demo-list-icon"></i>
            </div>
            <div class="item-inner">
              <div class="item-title item-label">Textarea</div>
              <div class="item-input-wrap">
                <textarea placeholder="Bio"></textarea>
              </div>
            </div>
          </li>
          <li class="item-content item-input">
            <div class="item-media">
              <i class="icon demo-list-icon"></i>
            </div>
            <div class="item-inner">
              <div class="item-title item-label">Resizable</div>
              <div class="item-input-wrap">
                <textarea class="resizable" placeholder="Bio"></textarea>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">Full Layout / Stacked Labels</div>
      <div class="list no-hairlines-md">
        <ul>
          <li class="item-content item-input">
            <div class="item-media">
              <i class="icon demo-list-icon"></i>
            </div>
            <div class="item-inner">
              <div class="item-title item-label">Name</div>
              <div class="item-input-wrap">
                <input type="text" placeholder="Your name" />
                <span class="input-clear-button"></span>
              </div>
            </div>
          </li>
          <li class="item-content item-input">
            <div class="item-media">
              <i class="icon demo-list-icon"></i>
            </div>
            <div class="item-inner">
              <div class="item-title item-label">Password</div>
              <div class="item-input-wrap">
                <input type="password" placeholder="Your password" />
                <span class="input-clear-button"></span>
              </div>
            </div>
          </li>
          <li class="item-content item-input">
            <div class="item-media">
              <i class="icon demo-list-icon"></i>
            </div>
            <div class="item-inner">
              <div class="item-title item-label">E-mail</div>
              <div class="item-input-wrap">
                <input type="email" placeholder="Your e-mail" />
                <span class="input-clear-button"></span>
              </div>
            </div>
          </li>
          <li class="item-content item-input">
            <div class="item-media">
              <i class="icon demo-list-icon"></i>
            </div>
            <div class="item-inner">
              <div class="item-title item-label">URL</div>
              <div class="item-input-wrap">
                <input type="url" placeholder="URL" />
                <span class="input-clear-button"></span>
              </div>
            </div>
          </li>
          <li class="item-content item-input">
            <div class="item-media">
              <i class="icon demo-list-icon"></i>
            </div>
            <div class="item-inner">
              <div class="item-title item-label">Phone</div>
              <div class="item-input-wrap">
                <input type="tel" placeholder="Your phone number" />
                <span class="input-clear-button"></span>
              </div>
            </div>
          </li>
          <li class="item-content item-input">
            <div class="item-media">
              <i class="icon demo-list-icon"></i>
            </div>
            <div class="item-inner">
              <div class="item-title item-label">Gender</div>
              <div class="item-input-wrap input-dropdown-wrap">
                <select placeholder="Please choose...">
                  <option value="Male">Male</option>
                  <option value="Female">Female</option>
                </select>
              </div>
            </div>
          </li>
          <li class="item-content item-input">
            <div class="item-media">
              <i class="icon demo-list-icon"></i>
            </div>
            <div class="item-inner">
              <div class="item-title item-label">Birthday</div>
              <div class="item-input-wrap">
                <input type="date" value="2014-04-30" placeholder="Please choose..." />
              </div>
            </div>
          </li>
          <li class="item-content item-input">
            <div class="item-media">
              <i class="icon demo-list-icon"></i>
            </div>
            <div class="item-inner">
              <div class="item-title item-label">Date time</div>
              <div class="item-input-wrap">
                <input type="datetime-local" placeholder="Please choose..." />
              </div>
            </div>
          </li>
          <li class="item-content item-input">
            <div class="item-media">
              <i class="icon demo-list-icon"></i>
            </div>
            <div class="item-inner">
              <div class="item-title item-label">Range</div>
              <div class="item-input-wrap">
                <div class="range-slider range-slider-init" data-label="true">
                  <input type="range" value="50" min="0" max="100" step="1" />
                </div>
              </div>
            </div>
          </li>
          <li class="item-content item-input">
            <div class="item-media">
              <i class="icon demo-list-icon"></i>
            </div>
            <div class="item-inner">
              <div class="item-title item-label">Textarea</div>
              <div class="item-input-wrap">
                <textarea placeholder="Bio"></textarea>
              </div>
            </div>
          </li>
          <li class="item-content item-input">
            <div class="item-media">
              <i class="icon demo-list-icon"></i>
            </div>
            <div class="item-inner">
              <div class="item-title item-label">Resizable</div>
              <div class="item-input-wrap">
                <textarea class="resizable" placeholder="Bio"></textarea>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">Floating Labels</div>
      <div class="list no-hairlines-md">
        <ul>
          <li class="item-content item-input">
            <div class="item-media">
              <i class="icon demo-list-icon"></i>
            </div>
            <div class="item-inner">
              <div class="item-title item-floating-label">Name</div>
              <div class="item-input-wrap">
                <input type="text" placeholder="Your name" />
                <span class="input-clear-button"></span>
              </div>
            </div>
          </li>
          <li class="item-content item-input">
            <div class="item-media">
              <i class="icon demo-list-icon"></i>
            </div>
            <div class="item-inner">
              <div class="item-title item-floating-label">Password</div>
              <div class="item-input-wrap">
                <input type="password" placeholder="Your password" />
                <span class="input-clear-button"></span>
              </div>
            </div>
          </li>
          <li class="item-content item-input">
            <div class="item-media">
              <i class="icon demo-list-icon"></i>
            </div>
            <div class="item-inner">
              <div class="item-title item-floating-label">E-mail</div>
              <div class="item-input-wrap">
                <input type="email" placeholder="Your e-mail" />
                <span class="input-clear-button"></span>
              </div>
            </div>
          </li>
          <li class="item-content item-input">
            <div class="item-media">
              <i class="icon demo-list-icon"></i>
            </div>
            <div class="item-inner">
              <div class="item-title item-floating-label">URL</div>
              <div class="item-input-wrap">
                <input type="url" placeholder="URL" />
                <span class="input-clear-button"></span>
              </div>
            </div>
          </li>
          <li class="item-content item-input">
            <div class="item-media">
              <i class="icon demo-list-icon"></i>
            </div>
            <div class="item-inner">
              <div class="item-title item-floating-label">Phone</div>
              <div class="item-input-wrap">
                <input type="tel" placeholder="Your phone number" />
                <span class="input-clear-button"></span>
              </div>
            </div>
          </li>
          <li class="item-content item-input">
            <div class="item-media">
              <i class="icon demo-list-icon"></i>
            </div>
            <div class="item-inner">
              <div class="item-title item-floating-label">Bio</div>
              <div class="item-input-wrap">
                <textarea class="resizable" placeholder="Bio"></textarea>
                <span class="input-clear-button"></span>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">Floating Labels + Outline Inputs</div>
      <div class="list no-hairlines-md">
        <ul>
          <li class="item-content item-input item-input-outline">
            <div class="item-media">
              <i class="icon demo-list-icon"></i>
            </div>
            <div class="item-inner">
              <div class="item-title item-floating-label">Name</div>
              <div class="item-input-wrap">
                <input type="text" placeholder="Your name" />
                <span class="input-clear-button"></span>
              </div>
            </div>
          </li>
          <li class="item-content item-input item-input-outline">
            <div class="item-media">
              <i class="icon demo-list-icon"></i>
            </div>
            <div class="item-inner">
              <div class="item-title item-floating-label">Password</div>
              <div class="item-input-wrap">
                <input type="password" placeholder="Your password" />
                <span class="input-clear-button"></span>
              </div>
            </div>
          </li>
          <li class="item-content item-input item-input-outline">
            <div class="item-media">
              <i class="icon demo-list-icon"></i>
            </div>
            <div class="item-inner">
              <div class="item-title item-floating-label">E-mail</div>
              <div class="item-input-wrap">
                <input type="email" placeholder="Your e-mail" />
                <span class="input-clear-button"></span>
              </div>
            </div>
          </li>
          <li class="item-content item-input item-input-outline">
            <div class="item-media">
              <i class="icon demo-list-icon"></i>
            </div>
            <div class="item-inner">
              <div class="item-title item-floating-label">URL</div>
              <div class="item-input-wrap">
                <input type="url" placeholder="URL" />
                <span class="input-clear-button"></span>
              </div>
            </div>
          </li>
          <li class="item-content item-input item-input-outline">
            <div class="item-media">
              <i class="icon demo-list-icon"></i>
            </div>
            <div class="item-inner">
              <div class="item-title item-floating-label">Phone</div>
              <div class="item-input-wrap">
                <input type="tel" placeholder="Your phone number" />
                <span class="input-clear-button"></span>
              </div>
            </div>
          </li>
          <li class="item-content item-input item-input-outline">
            <div class="item-media">
              <i class="icon demo-list-icon"></i>
            </div>
            <div class="item-inner">
              <div class="item-title item-floating-label">Bio</div>
              <div class="item-input-wrap">
                <textarea class="resizable" placeholder="Bio"></textarea>
                <span class="input-clear-button"></span>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">Validation + Additional Info</div>
      <div class="list no-hairlines-md">
        <ul>
          <li class="item-content item-input item-input-with-info">
            <div class="item-media">
              <i class="icon demo-list-icon"></i>
            </div>
            <div class="item-inner">
              <div class="item-title item-label">Name</div>
              <div class="item-input-wrap">
                <input type="text" placeholder="Your name" required validate />
                <span class="input-clear-button"></span>
                <div class="item-input-info">Default "required" validation</div>
              </div>
            </div>
          </li>
          <li class="item-content item-input item-input-with-info">
            <div class="item-media">
              <i class="icon demo-list-icon"></i>
            </div>
            <div class="item-inner">
              <div class="item-title item-label">Fruit</div>
              <div class="item-input-wrap">
                <input type="text" placeholder="Type 'apple' or 'banana'" required validate
                  pattern="apple|banana" />
                <span class="input-clear-button"></span>
                <div class="item-input-info">Pattern validation (<b>apple|banana</b>)</div>
              </div>
            </div>
          </li>
          <li class="item-content item-input item-input-with-info">
            <div class="item-media">
              <i class="icon demo-list-icon"></i>
            </div>
            <div class="item-inner">
              <div class="item-title item-label">E-mail</div>
              <div class="item-input-wrap">
                <input type="email" placeholder="Your e-mail" required validate />
                <span class="input-clear-button"></span>
                <div class="item-input-info">Default e-mail validation</div>
              </div>
            </div>
          </li>
          <li class="item-content item-input item-input-with-info">
            <div class="item-media">
              <i class="icon demo-list-icon"></i>
            </div>
            <div class="item-inner">
              <div class="item-title item-label">URL</div>
              <div class="item-input-wrap">
                <input type="url" placeholder="Your URL" required validate />
                <span class="input-clear-button"></span>
                <div class="item-input-info">Default URL validation</div>
              </div>
            </div>
          </li>
          <li class="item-content item-input item-input-with-info">
            <div class="item-media">
              <i class="icon demo-list-icon"></i>
            </div>
            <div class="item-inner">
              <div class="item-title item-label">Number</div>
              <div class="item-input-wrap">
                <input type="text" placeholder="Enter number" required validate pattern="[0-9]*"
                  data-error-message="Only numbers please!" />
                <span class="input-clear-button"></span>
                <div class="item-input-info">With custom error message</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">Icon + Input</div>
      <div class="list no-hairlines-md">
        <ul>
          <li class="item-content item-input">
            <div class="item-media">
              <i class="icon demo-list-icon"></i>
            </div>
            <div class="item-inner">
              <div class="item-input-wrap">
                <input type="text" placeholder="Your name" />
                <span class="input-clear-button"></span>
              </div>
            </div>
          </li>
          <li class="item-content item-input">
            <div class="item-media">
              <i class="icon demo-list-icon"></i>
            </div>
            <div class="item-inner">
              <div class="item-input-wrap">
                <input type="password" placeholder="Your password" />
                <span class="input-clear-button"></span>
              </div>
            </div>
          </li>
          <li class="item-content item-input">
            <div class="item-media">
              <i class="icon demo-list-icon"></i>
            </div>
            <div class="item-inner">
              <div class="item-input-wrap">
                <input type="email" placeholder="Your e-mail" />
                <span class="input-clear-button"></span>
              </div>
            </div>
          </li>
          <li class="item-content item-input">
            <div class="item-media">
              <i class="icon demo-list-icon"></i>
            </div>
            <div class="item-inner">
              <div class="item-input-wrap">
                <input type="url" placeholder="URL" />
                <span class="input-clear-button"></span>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">Label + Input</div>
      <div class="list no-hairlines-md">
        <ul>
          <li class="item-content item-input">
            <div class="item-inner">
              <div class="item-title item-label">Name</div>
              <div class="item-input-wrap">
                <input type="text" placeholder="Your name" />
                <span class="input-clear-button"></span>
              </div>
            </div>
          </li>
          <li class="item-content item-input">
            <div class="item-inner">
              <div class="item-title item-label">Password</div>
              <div class="item-input-wrap">
                <input type="password" placeholder="Your password" />
                <span class="input-clear-button"></span>
              </div>
            </div>
          </li>
          <li class="item-content item-input">
            <div class="item-inner">
              <div class="item-title item-label">E-mail</div>
              <div class="item-input-wrap">
                <input type="email" placeholder="Your e-mail" />
                <span class="input-clear-button"></span>
              </div>
            </div>
          </li>
          <li class="item-content item-input">
            <div class="item-inner">
              <div class="item-title item-label">URL</div>
              <div class="item-input-wrap">
                <input type="url" placeholder="URL" />
                <span class="input-clear-button"></span>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">Only Inputs</div>
      <div class="list no-hairlines-md">
        <ul>
          <li class="item-content item-input">
            <div class="item-inner">
              <div class="item-input-wrap">
                <input type="text" placeholder="Your name" />
                <span class="input-clear-button"></span>
              </div>
            </div>
          </li>
          <li class="item-content item-input">
            <div class="item-inner">
              <div class="item-input-wrap">
                <input type="password" placeholder="Your password" />
                <span class="input-clear-button"></span>
              </div>
            </div>
          </li>
          <li class="item-content item-input">
            <div class="item-inner">
              <div class="item-input-wrap">
                <input type="email" placeholder="Your e-mail" />
                <span class="input-clear-button"></span>
              </div>
            </div>
          </li>
          <li class="item-content item-input">
            <div class="item-inner">
              <div class="item-input-wrap">
                <input type="url" placeholder="URL" />
                <span class="input-clear-button"></span>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">Inputs + Additional Info</div>
      <div class="list no-hairlines-md">
        <ul>
          <li class="item-content item-input item-input-with-info">
            <div class="item-inner">
              <div class="item-input-wrap">
                <input type="text" placeholder="Your name" />
                <span class="input-clear-button"></span>
                <div class="item-input-info">Full name please</div>
              </div>
            </div>
          </li>
          <li class="item-content item-input item-input-with-info">
            <div class="item-inner">
              <div class="item-input-wrap">
                <input type="password" placeholder="Your password" />
                <span class="input-clear-button"></span>
                <div class="item-input-info">8 characters minimum</div>
              </div>
            </div>
          </li>
          <li class="item-content item-input item-input-with-info">
            <div class="item-inner">
              <div class="item-input-wrap">
                <input type="email" placeholder="Your e-mail" />
                <span class="input-clear-button"></span>
                <div class="item-input-info">Your work e-mail address</div>
              </div>
            </div>
          </li>
          <li class="item-content item-input item-input-with-info">
            <div class="item-inner">
              <div class="item-input-wrap">
                <input type="url" placeholder="URL" />
                <span class="input-clear-button"></span>
                <div class="item-input-info">Your website URL</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">Only Inputs Inset</div>
      <div class="list inset">
        <ul>
          <li class="item-content item-input">
            <div class="item-inner">
              <div class="item-input-wrap">
                <input type="text" placeholder="Your name" />
                <span class="input-clear-button"></span>
              </div>
            </div>
          </li>
          <li class="item-content item-input">
            <div class="item-inner">
              <div class="item-input-wrap">
                <input type="password" placeholder="Your password" />
                <span class="input-clear-button"></span>
              </div>
            </div>
          </li>
          <li class="item-content item-input">
            <div class="item-inner">
              <div class="item-input-wrap">
                <input type="email" placeholder="Your e-mail" />
                <span class="input-clear-button"></span>
              </div>
            </div>
          </li>
          <li class="item-content item-input">
            <div class="item-inner">
              <div class="item-input-wrap">
                <input type="url" placeholder="URL" />
                <span class="input-clear-button"></span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<style>
  .demo-list-icon,
  .icon-f7 {
    background: #ccc;
    display: block;
    position: relative;
  }

  .ios .demo-list-icon {
    width: 29px;
    height: 29px;
    border-radius: 6px;
    box-sizing: border-box;
  }

  .md .demo-list-icon {
    width: 24px;
    height: 24px;
    border-radius: 4px;
  }

  .aurora .demo-list-icon {
    width: 18px;
    height: 18px;
    border-radius: 4px;
  }
</style>