Framework7 Form Elements — Input Fields, Toggles, Sliders, and Smart Select

DodaTech Updated 2026-06-28 6 min read

In this tutorial, you will learn about Framework7 Form Elements. We cover key concepts, practical examples, and best practices to help you master this topic.

Framework7 form elements provide mobile-optimized input controls — text fields, toggles, sliders, date pickers, smart select lists, and radio/checkbox groups — with iOS and Material Design styling.

What You'll Learn

Text inputs and textarea fields
Toggles, checkboxes, and radios
Sliders and range inputs
Smart select list pickers
Form validation and submission
Date and time pickers

Why It Matters

Mobile forms must be touch-friendly with large tap targets, appropriate keyboard types, and platform-specific styling. Framework7 form elements handle keyboard management, touch events, and platform theming automatically.

Real-World Use

A registration form with text fields for name and email, a toggle for notifications, a slider for age range, smart select for country picker, date picker for birthday, and validation before submission.

Form Architecture

flowchart TD
    A[Form] --> B[Text Input]
    A --> C[Toggle/Switch]
    A --> D[Slider]
    A --> E[Smart Select]
    A --> F[Date Picker]
    A --> G[Checkbox/Radio]
    B --> H[Keyboard Type]
    A --> I[Validation]
    I --> J[Submit]
    style A fill:#e6f3ff,stroke:#4a90d9,stroke-width:2px

Text Input Fields

<div class="list">
  <ul>
    <li>
      <div class="item-content item-input">
        <div class="item-media"><i class="icon f7-icons">person</i></div>
        <div class="item-inner">
          <div class="item-title item-label">Full Name</div>
          <div class="item-input-wrap">
            <input type="text" name="name" placeholder="Your full name" />
            <span class="input-clear-button"></span>
          </div>
        </div>
      </div>
    </li>
    <li>
      <div class="item-content item-input">
        <div class="item-media"><i class="icon f7-icons">envelope</i></div>
        <div class="item-inner">
          <div class="item-title item-label">Email</div>
          <div class="item-input-wrap">
            <input type="email" name="email" placeholder="your@email.com" />
          </div>
        </div>
      </div>
    </li>
    <li>
      <div class="item-content item-input">
        <div class="item-media"><i class="icon f7-icons">lock</i></div>
        <div class="item-inner">
          <div class="item-title item-label">Password</div>
          <div class="item-input-wrap">
            <input type="password" name="password" placeholder="Password" />
          </div>
        </div>
      </div>
    </li>
    <li>
      <div class="item-content item-input">
        <div class="item-inner">
          <div class="item-title item-label">Bio</div>
          <div class="item-input-wrap">
            <textarea name="bio" placeholder="Tell us about yourself"></textarea>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

Expected output: Form fields with icons, labels, and input areas. The clear button appears when the field has text. Different keyboard types appear for email and password fields.

Toggle and Switch

<div class="list">
  <ul>
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-title">Push Notifications</div>
          <div class="item-after">
            <label class="toggle">
              <input type="checkbox" name="notifications" checked />
              <span class="toggle-icon"></span>
            </label>
          </div>
        </div>
      </div>
    </li>
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-title">Dark Mode</div>
          <div class="item-after">
            <label class="toggle">
              <input type="checkbox" name="darkMode" />
              <span class="toggle-icon"></span>
            </label>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

$$('.toggle input').on('change', function() {
  var isChecked = this.checked;
  var name = this.getAttribute('name');
  if (name === 'darkMode' && isChecked) {
    $$('body').addClass('dark');
  } else {
    $$('body').removeClass('dark');
  }
});

Expected output: Two toggle switches. Push Notifications is on by default. Toggling Dark Mode adds or removes a dark class on the body.

Radio and Checkbox Groups

<div class="list">
  <ul>
    <li class="item-divider">Payment Method</li>
    <li>
      <label class="item-content item-radio">
        <input type="radio" name="payment" value="credit" checked />
        <i class="icon icon-radio"></i>
        <div class="item-inner">
          <div class="item-title">Credit Card</div>
        </div>
      </label>
    </li>
    <li>
      <label class="item-content item-radio">
        <input type="radio" name="payment" value="paypal" />
        <i class="icon icon-radio"></i>
        <div class="item-inner">
          <div class="item-title">PayPal</div>
        </div>
      </label>
    </li>
    <li class="item-divider">Interests</li>
    <li>
      <label class="item-content item-checkbox">
        <input type="checkbox" name="interests" value="tech" />
        <i class="icon icon-checkbox"></i>
        <div class="item-inner">
          <div class="item-title">Technology</div>
        </div>
      </label>
    </li>
  </ul>
</div>

Expected output: Radio buttons for payment method (one choice), checkboxes for interests (multiple choices). Selected items show a filled icon.

Smart Select

<div class="list">
  <ul>
    <li>
      <div class="item-content item-input">
        <div class="item-inner">
          <div class="item-title item-label">Country</div>
          <div class="item-input-wrap">
            <select name="country">
              <option value="us">United States</option>
              <option value="ca">Canada</option>
              <option value="uk">United Kingdom</option>
              <option value="au">Australia</option>
              <option value="in">India</option>
              <option value="de">Germany</option>
              <option value="fr">France</option>
            </select>
          </div>
        </div>
      </div>
    </li>
    <li>
      <div class="item-content item-input">
        <div class="item-inner">
          <div class="item-title item-label">Time Zone</div>
          <div class="item-input-wrap">
            <select name="timezone">
              <optgroup label="Americas">
                <option value="est">Eastern (-5)</option>
                <option value="cst">Central (-6)</option>
                <option value="mst">Mountain (-7)</option>
                <option value="pst">Pacific (-8)</option>
              </optgroup>
              <optgroup label="Europe">
                <option value="gmt">GMT (0)</option>
                <option value="cet">CET (+1)</option>
                <option value="eet">EET (+2)</option>
              </optgroup>
            </select>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

$$(document).on('smartSelect:close', '.smart-select', function(e) {
  console.log('Smart select closed, value:', this.value);
});

var country = $$('[name="country"]').val();

Expected output: The select renders as a smart select picker — tapping opens a native-style list page with search and grouped options.

Slider and Range

<div class="block">
  <div class="range-slider" id="volume-slider">
    <input type="range" min="0" max="100" step="1" value="50" />
  </div>
</div>

<div class="block">
  <div class="range-slider range-slider-dual">
    <input type="range" min="0" max="1000" step="10" value="0" />
    <input type="range" min="0" max="1000" step="10" value="1000" />
  </div>
</div>

<div class="list">
  <ul>
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-title">Volume</div>
          <div class="item-after"><span id="volume-value">50</span>%</div>
        </div>
      </div>
    </li>
  </ul>
</div>

$$('#volume-slider input').on('input', function() {
  $$('#volume-value').text(this.value);
});

$$('.range-slider-dual input').on('input', function() {
  var inputs = $$('.range-slider-dual input');
  var min = parseInt(inputs[0].value);
  var max = parseInt(inputs[1].value);
  if (min > max) { var t = min; min = max; max = t; }
  console.log('Price range:', min, '-', max);
});

Expected output: A single range slider controls volume percentage. A dual range slider sets a price range with min and max values.

Date and Time Picker

var datePicker = app.calendar.create({
  inputEl: '[name="birthdate"]',
  dateFormat: 'MM dd, yyyy',
  openIn: 'auto',
  header: true,
  weekHeader: true,
  on: {
    change: function(calendar, value) {
      console.log('Selected date:', value);
    }
  }
});

var timePicker = app.calendar.create({
  inputEl: '[name="meeting"]',
  type: 'time',
  timeFormat: 'hh:mm',
  on: {
    change: function(calendar, value) {
      console.log('Selected time:', value);
    }
  }
});

datePicker.open();

Expected output: Tapping the date field opens a calendar picker. Tapping time field opens a time picker. Selected values appear in the fields.

Form Validation

<div class="list">
  <ul>
    <li>
      <div class="item-content item-input item-input-with-error-message">
        <div class="item-inner">
          <div class="item-title item-label">Email</div>
          <div class="item-input-wrap">
            <input type="email" name="email" required placeholder="your@email.com" />
            <span class="input-error-message">Please enter a valid email</span>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

$$('#submit-btn').on('click', function() {
  var valid = true;
  $$('[name]').each(function() {
    var el = this;
    var parentItem = $$(el).parents('.item-content');
    parentItem.removeClass('item-input-error');
    if (el.hasAttribute('required') && !el.value) {
      parentItem.addClass('item-input-error');
      valid = false;
    }
  });
  if (valid) {
    app.dialog.alert('Form is valid!');
  } else {
    app.dialog.alert('Please fix highlighted fields.');
  }
});

Expected output: Invalid fields show error messages. The item-input-error class highlights fields with red borders.

Common Mistakes

Not adding item-input class - Form inputs require item-input on the item-content div for proper styling.
Forgetting the input-clear-button span - The clear button span enables the clear functionality.
Using native select without smart-select - Regular selects do not trigger Framework7 smart select behavior automatically.
Not setting input type correctly - Mobile keyboards depend on type="email", type="tel", type="number".
Ignoring readonly on picker inputs - Date/time picker inputs should be readonly to prevent text keyboard from appearing.

Practice Questions

How do you create a toggle switch?
What is a smart select and how is it different from a native select?
How do you create a dual range slider?
How do you add validation error states?
How do you open a calendar programmatically?

Challenge: Build a complete registration form with name, email, password, date picker for birthday, smart select for country, dual slider for price range, checkboxes for interests, radio buttons for account type, toggles for notifications, and full validation.

FAQ

How do I get form values on submit?

Use $$('[name]').each() to collect values, or app.form.convertToData(formElement) which returns an object of name-value pairs.

Can I use HTML5 validation with Framework7 forms?

Yes. Framework7 supports required, min, max, pattern, and type attributes with error message display.

How do I create a custom picker?

Use the Calendar component for dates/times or the Picker component for custom item selection.

Can I disable form validation styling?

Yes. Override the .item-input-error CSS class or remove the error class programmatically.

How do I submit a form via AJAX?

Collect data with app.form.convertToData(), then use fetch() or app.request.post() to send to your API.

Mini Project

Build a user settings form with name, email, bio, language smart select, time zone smart select, date format picker, notification toggles, dark mode toggle, font size slider, and a save button that validates and logs data.

What's Next

Forms collect data. Learn how Framework7 Cards and Panels create visual content containers with headers, footers, and expandable content.

← Previous Framework7 List View — Contacts, Media Lists, Swipe Actions, and Grouping Next → Framework7 Cards and Panels — Content Containers, Expansion, and Side Panels

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Framework7