Mobiscroll Forms Make your pages and forms look great and work great

Get started with our free product
for building great forms

Enter your email address to download and build great forms!

No CSS hacking needed.
Clean stylesheet ready to be used

Pixel perfect rendering

Easy theming for iOS, Android,
Windows Phone and the Web

Meet the form elements

With more than 13 unique form controls, you are equipped to build great looking forms.
From single-line text inputs to switches you'll have all you need.

Single and multiline text

Text fields are the backbone of every form. Use it to capture a wide range of properties from plain text to passwords.

  • Text inputs - With single-line input fields you can capture all kinds of values, ranging from plain text, passwords, numeric values, email addresses… (all HTML5 input types are supported).

  • Text areas - Let users enter multi-line text like comments and any longer content.

Use labels, icons, placeholders or a combination of them to help users get meaning at a glance. Show/hide functionality built in for password fields.

<label>
    First Name
    <input type="text" id="first" placeholder="What's your first name?"/>
</label>

<mbsc-input type="text" id="first" placeholder="What's your first name?">First Name</mbsc-input>
<label>
    First Name
    <input type="text" id="first" placeholder="What's your first name?"/>
</label>

<label>
    First Name
    <input type="text" id="first" placeholder="What's your first name?"/>
</label>

<label>
    First Name
    <input type="text" id="first" placeholder="What's your first name?"/>
</label>

See text inputs in action
<label>
    First Name
    <input type="text" id="first" placeholder="What's your first name?"/>
</label>

<mbsc-input type="text" id="first" placeholder="What's your first name?">First Name</mbsc-input>
<label>
    First Name
    <input type="text" id="first" placeholder="What's your first name?"/>
</label>

<label>
    First Name
    <input type="text" id="first" placeholder="What's your first name?"/>
</label>

<label>
    First Name
    <input type="text" id="first" placeholder="What's your first name?"/>
</label>

See text inputs in action

Select styling

Similar to the single line input styling, it features a chevron/dropdown arrow to clearly signal the difference between select and text input.

Works with the native select or the enhanced Mobiscroll Select control.

<label>
    Favorite Car
    <select>
        <option>Select</option>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select>
</label>

<mbsc-dropdown label="Favorite Car">
    <option value="select">Select</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</mbsc-dropdown>

<label>
    Favorite Car
    <select>
        <option>Select</option>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select>
</label>

<label>
    Favorite Car
    <select>
        <option>Select</option>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select>
</label>

<label>
    Favorite Car
    <select>
        <option>Select</option>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select>
</label>

See the select with and without icons
<label>
    Favorite Car
    <select>
        <option>Select</option>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select>
</label>

<mbsc-dropdown label="Favorite Car">
    <option value="select">Select</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</mbsc-dropdown>

<label>
    Favorite Car
    <select>
        <option>Select</option>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select>
</label>

<label>
    Favorite Car
    <select>
        <option>Select</option>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select>
</label>

<label>
    Favorite Car
    <select>
        <option>Select</option>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select>
</label>

See the select with and without icons

Buttons

Buttons with different states, styles and alignments. Inline or raised, left aligned, right aligned, centered or justified. Full-width buttons supported as well.

Use it with or without icons.

<div class="mbsc-btn-group-justified">
    <button>Tag</button>
    <button>Favorite</button>
    <button>Flag</button>
</div>

<div class="mbsc-btn-group-justified">
    <mbsc-button>Tag</mbsc-button>
    <mbsc-button>Favorite</mbsc-button>
    <mbsc-button>Flag</mbsc-button>
</div>

<div class="mbsc-btn-group-justified">
    <button>Tag</button>
    <button>Favorite</button>
    <button>Flag</button>
</div>

<div className="mbsc-btn-group-justified">
    <button>Tag</button>
    <button>Favorite</button>
    <button>Flag</button>
</div>

<div class="mbsc-btn-group-justified">
    <button>Tag</button>
    <button>Favorite</button>
    <button>Flag</button>
</div>

Learn how to use the buttons in your forms
<div class="mbsc-btn-group-justified">
    <button>Tag</button>
    <button>Favorite</button>
    <button>Flag</button>
</div>

<div class="mbsc-btn-group-justified">
    <mbsc-button>Tag</mbsc-button>
    <mbsc-button>Favorite</mbsc-button>
    <mbsc-button>Flag</mbsc-button>
</div>

<div class="mbsc-btn-group-justified">
    <button>Tag</button>
    <button>Favorite</button>
    <button>Flag</button>
</div>

<div className="mbsc-btn-group-justified">
    <button>Tag</button>
    <button>Favorite</button>
    <button>Flag</button>
</div>

<div class="mbsc-btn-group-justified">
    <button>Tag</button>
    <button>Favorite</button>
    <button>Flag</button>
</div>

Learn how to use the buttons in your forms

Segmented control

Easily lay out two to five options for single and multiple select. Making all options instantly visible lets users make selections with a single interaction instead of at least 3 (tap to open select, do the select, hit set - like for the traditional dropdown).

<label> Day
    <input type="radio" data-role="segmented" name="range">
</label>
<label> Week
    <input type="radio" data-role="segmented" name="range">
</label>
<label> Month
    <input type="radio" data-role="segmented" name="range">
</label>
<label> Year
    <input type="radio" data-role="segmented" name="range" checked>
</label>

<mbsc-segmented-group>
    <mbsc-segmented value="day">Day</mbsc-segmented>
    <mbsc-segmented value="week">Week</mbsc-segmented>
    <mbsc-segmented value="month">Month</mbsc-segmented>
    <mbsc-segmented value="year">Year</mbsc-segmented>
</mbsc-segmented-group>

<label> Day
    <input type="radio" data-role="segmented" name="range" ng-model="range" ng-checked="range == 'day'" value="day">
</label>
<label> Week
    <input type="radio" data-role="segmented" name="range" ng-model="range" ng-checked="range == 'week'" value="week">
</label>
<label> Month
    <input type="radio" data-role="segmented" name="range" ng-model="range" ng-checked="range == 'month'" value="month">
</label>
<label> Year
    <input type="radio" data-role="segmented" name="range" ng-model="range" ng-checked="range == 'year'" value="year">
</label>

<label> Day
    <input type="radio" data-role="segmented" name="range"/>
</label>
<label> Week
    <input type="radio" data-role="segmented" name="range"/>
</label>
<label> Month
    <input type="radio" data-role="segmented" name="range"/>
</label>
<label> Year
    <input type="radio" data-role="segmented" name="range" defaultChecked/>
</label>

<label> Day
    <input type="radio" data-role="segmented" name="range" value="day" checked data-bind="checked: segmented">
</label>
<label> Week
    <input type="radio" data-role="segmented" name="range" value="week" data-bind="checked: segmented">
</label>
<label> Month
    <input type="radio" data-role="segmented" name="range" value="month" data-bind="checked: segmented">
</label>
<label> Year
    <input type="radio" data-role="segmented" name="range" value="year" checked data-bind="checked: segmented">
</label>

See how to use the segmented
<label> Day
    <input type="radio" data-role="segmented" name="range">
</label>
<label> Week
    <input type="radio" data-role="segmented" name="range">
</label>
<label> Month
    <input type="radio" data-role="segmented" name="range">
</label>
<label> Year
    <input type="radio" data-role="segmented" name="range" checked>
</label>

<mbsc-segmented-group>
    <mbsc-segmented value="day">Day</mbsc-segmented>
    <mbsc-segmented value="week">Week</mbsc-segmented>
    <mbsc-segmented value="month">Month</mbsc-segmented>
    <mbsc-segmented value="year">Year</mbsc-segmented>
</mbsc-segmented-group>

<label> Day
    <input type="radio" data-role="segmented" name="range" ng-model="range" ng-checked="range == 'day'" value="day">
</label>
<label> Week
    <input type="radio" data-role="segmented" name="range" ng-model="range" ng-checked="range == 'week'" value="week">
</label>
<label> Month
    <input type="radio" data-role="segmented" name="range" ng-model="range" ng-checked="range == 'month'" value="month">
</label>
<label> Year
    <input type="radio" data-role="segmented" name="range" ng-model="range" ng-checked="range == 'year'" value="year">
</label>

<label> Day
    <input type="radio" data-role="segmented" name="range"/>
</label>
<label> Week
    <input type="radio" data-role="segmented" name="range"/>
</label>
<label> Month
    <input type="radio" data-role="segmented" name="range"/>
</label>
<label> Year
    <input type="radio" data-role="segmented" name="range" defaultChecked/>
</label>

<label> Day
    <input type="radio" data-role="segmented" name="range" value="day" checked data-bind="checked: segmented">
</label>
<label> Week
    <input type="radio" data-role="segmented" name="range" value="week" data-bind="checked: segmented">
</label>
<label> Month
    <input type="radio" data-role="segmented" name="range" value="month" data-bind="checked: segmented">
</label>
<label> Year
    <input type="radio" data-role="segmented" name="range" value="year" checked data-bind="checked: segmented">
</label>

See how to use the segmented

Checkbox and checklist

Similar to the native checkbox in functionality but a look and feel that fits with the overall user experience and theme. Features description text, checkbox list and disabled styling.

Excellent choice for inline multi-select lists.

<label>
    <input type="checkbox" checked>
    Show Caller ID
    <span class="mbsc-desc">Pass and show ID when making a phone call.</span>
</label>

<mbsc-checkbox>
    Show Caller ID
    <span class="mbsc-desc">Pass and show ID when making a phone call.</span>
</mbsc-checkbox>

<label>
    <input type="checkbox" checked>
    Show Caller ID
    <span class="mbsc-desc">Pass and show ID when making a phone call.</span>
</label>

<label>
    <input type="checkbox" defaultChecked/>
    Show Caller ID
    <span className="mbsc-desc">Pass and show ID when making a phone call.</span>
</label>

<label>
    <input type="checkbox" checked>
    Show Caller ID
    <span class="mbsc-desc">Pass and show ID when making a phone call.</span>
</label>

View a demo of the checkbox list
<label>
    <input type="checkbox" checked>
    Show Caller ID
    <span class="mbsc-desc">Pass and show ID when making a phone call.</span>
</label>

<mbsc-checkbox>
    Show Caller ID
    <span class="mbsc-desc">Pass and show ID when making a phone call.</span>
</mbsc-checkbox>

<label>
    <input type="checkbox" checked>
    Show Caller ID
    <span class="mbsc-desc">Pass and show ID when making a phone call.</span>
</label>

<label>
    <input type="checkbox" defaultChecked/>
    Show Caller ID
    <span className="mbsc-desc">Pass and show ID when making a phone call.</span>
</label>

<label>
    <input type="checkbox" checked>
    Show Caller ID
    <span class="mbsc-desc">Pass and show ID when making a phone call.</span>
</label>

View a demo of the checkbox list

Radio buttons

Single select for a list of options. Use it instead of the segmented control if there are more items that would fit in a single line.

Usually a good choice for five options and above. Features disabled styling and optional description.

<label>
    <input type="radio" name="lang">
    English
    <span class="mbsc-desc">Select for English audio and subtitles.</span>
</label>
<label>
    <input type="radio" name="lang" checked>
    Spanish
    <span class="mbsc-desc">Select for Spanish audio and subtitles.</span>
</label>

<mbsc-radio-group>
    <mbsc-radio value="eng">
        English
        <span class="mbsc-desc">Select for English audio and subtitles.</span>
    </mbsc-radio>
    <mbsc-radio value="spa">
        Spanish
        <span class="mbsc-desc">Select for Spanish audio and subtitles.</span>
    </mbsc-radio>
</mbsc-radio-group>

<label>
    <input type="radio" name="lang">
    English
    <span class="mbsc-desc">Select for English audio and subtitles.</span>
</label>
<label>
    <input type="radio" name="lang" checked>
    Spanish
    <span class="mbsc-desc">Select for Spanish audio and subtitles.</span>
</label>

<label>
    <input type="radio" name="lang"/>
    English
    <span className="mbsc-desc">Select for English audio and subtitles.</span>
</label>
<label>
    <input type="radio" name="lang" defaultChecked/>
    Spanish
    <span className="mbsc-desc">Select for Spanish audio and subtitles.</span>
</label>

<label>
    <input type="radio" name="lang">
    English
    <span class="mbsc-desc">Select for English audio and subtitles.</span>
</label>
<label>
    <input type="radio" name="lang" checked>
    Spanish
    <span class="mbsc-desc">Select for Spanish audio and subtitles.</span>
</label>

View this live demo that shows a radio button list
<label>
    <input type="radio" name="lang">
    English
    <span class="mbsc-desc">Select for English audio and subtitles.</span>
</label>
<label>
    <input type="radio" name="lang" checked>
    Spanish
    <span class="mbsc-desc">Select for Spanish audio and subtitles.</span>
</label>

<mbsc-radio-group>
    <mbsc-radio value="eng">
        English
        <span class="mbsc-desc">Select for English audio and subtitles.</span>
    </mbsc-radio>
    <mbsc-radio value="spa">
        Spanish
        <span class="mbsc-desc">Select for Spanish audio and subtitles.</span>
    </mbsc-radio>
</mbsc-radio-group>

<label>
    <input type="radio" name="lang">
    English
    <span class="mbsc-desc">Select for English audio and subtitles.</span>
</label>
<label>
    <input type="radio" name="lang" checked>
    Spanish
    <span class="mbsc-desc">Select for Spanish audio and subtitles.</span>
</label>

<label>
    <input type="radio" name="lang"/>
    English
    <span className="mbsc-desc">Select for English audio and subtitles.</span>
</label>
<label>
    <input type="radio" name="lang" defaultChecked/>
    Spanish
    <span className="mbsc-desc">Select for Spanish audio and subtitles.</span>
</label>

<label>
    <input type="radio" name="lang">
    English
    <span class="mbsc-desc">Select for English audio and subtitles.</span>
</label>
<label>
    <input type="radio" name="lang" checked>
    Spanish
    <span class="mbsc-desc">Select for Spanish audio and subtitles.</span>
</label>

View this live demo that shows a radio button list

Switch

Just like the checkbox, the switch lets users turn options on/off. Can be rendered as a list of fields, like the checkbox list or as a stand-alone control.

Features optional description and disabled styling.

<label>
    <input data-role="switch" type="checkbox" checked>
    Smart Away Lights
    <span class="mbsc-desc">Automatically turn off lights if nobody is home.</span>
</label>

<mbsc-switch>
    Smart Away Lights
    <span class="mbsc-desc">Automatically turn off lights if nobody is home.</span>
</mbsc-switch>

<label>
    <input type="checkbox" data-role="switch" ng-model="switchProperty" mobiscroll-switch>
    Smart Away Lights
    <span class="mbsc-desc">Automatically turn off lights if nobody is home.</span>
</label>

<mobiscroll.Switch value={this.state.switch} onChange={this.onChange}>
    Smart Away Lights
    <span className="mbsc-desc">Automatically turn off lights if nobody is home.</span>
</mobiscroll.Switch>

<label>
    <input type="checkbox" data-role="switch" data-bind="mobiscroll.switch: switchProperty" />
    Smart Away Lights
    <span class="mbsc-desc">Automatically turn off lights if nobody is home.</span>
</label>

See how to use the switch
<label>
    <input data-role="switch" type="checkbox" checked>
    Smart Away Lights
    <span class="mbsc-desc">Automatically turn off lights if nobody is home.</span>
</label>

<mbsc-switch>
    Smart Away Lights
    <span class="mbsc-desc">Automatically turn off lights if nobody is home.</span>
</mbsc-switch>

<label>
    <input type="checkbox" data-role="switch" ng-model="switchProperty" mobiscroll-switch>
    Smart Away Lights
    <span class="mbsc-desc">Automatically turn off lights if nobody is home.</span>
</label>

<mobiscroll.Switch value={this.state.switch} onChange={this.onChange}>
    Smart Away Lights
    <span className="mbsc-desc">Automatically turn off lights if nobody is home.</span>
</mobiscroll.Switch>

<label>
    <input type="checkbox" data-role="switch" data-bind="mobiscroll.switch: switchProperty" />
    Smart Away Lights
    <span class="mbsc-desc">Automatically turn off lights if nobody is home.</span>
</label>

See how to use the switch

Stepper

When users need to make small adjustments to values by increasing or decreasing it avoid free-form input and dropdowns. Steppers help in minimizing mistakes, and reduce the number of taps for getting the values right.

The values can be adjusted by typing the values with the native keyboard or using the Mobiscroll Numeric Keypad.

<div>
    <label for="md-adults">Adults</label>
    <span class="mbsc-desc">From 14 years</span>
    <input id="md-adults" type="number" data-role="stepper" min="1" value="1" max="15" />
</div>

<mbsc-stepper min="1" [(value)]="myValue" max="15">
    Adults
    <span class="mbsc-desc">From 14 years</span>
</mbsc-stepper>

<div>
    <label for="md-adults">Adults</label>
    <span class="mbsc-desc">From 14 years</span>
    <input id="md-adults" type="number" data-role="stepper" mobiscroll-stepper ng-model="stepperProperty" min="1" value="1" max="15" />
</div>

<mobiscroll.Stepper type="number" data-role="stepper" min={1} max={15} value={this.state.adults} onChange={this.adultsChange}>
    <label>Adults</label>
    <span className="mbsc-desc">From 14 years</span>
</mobiscroll.Stepper>

<div>
    <label for="md-adults">Adults</label>
    <span class="mbsc-desc">From 14 years</span>
    <input id="md-adults" type="number" data-role="stepper" data-bind="mobiscroll.stepper: stepperProperty" min="1" value="1" max="15" />
</div>

See how to use the stepper
<div>
    <label for="md-adults">Adults</label>
    <span class="mbsc-desc">From 14 years</span>
    <input id="md-adults" type="number" data-role="stepper" min="1" value="1" max="15" />
</div>

<mbsc-stepper min="1" [(value)]="myValue" max="15">
    Adults
    <span class="mbsc-desc">From 14 years</span>
</mbsc-stepper>

<div>
    <label for="md-adults">Adults</label>
    <span class="mbsc-desc">From 14 years</span>
    <input id="md-adults" type="number" data-role="stepper" mobiscroll-stepper ng-model="stepperProperty" min="1" value="1" max="15" />
</div>

<mobiscroll.Stepper type="number" data-role="stepper" min={1} max={15} value={this.state.adults} onChange={this.adultsChange}>
    <label>Adults</label>
    <span className="mbsc-desc">From 14 years</span>
</mobiscroll.Stepper>

<div>
    <label for="md-adults">Adults</label>
    <span class="mbsc-desc">From 14 years</span>
    <input id="md-adults" type="number" data-role="stepper" data-bind="mobiscroll.stepper: stepperProperty" min="1" value="1" max="15" />
</div>

See how to use the stepper

Page and typography

Takes care of setting the background colors, spacing and typographic styling. It makes sure that the content you add shows up nicely on any screen-size.

<div mbsc-page>
    <div class="mbsc-padding">
        <p class="mbsc-bold"> Bold paragraph with a <a href="#">link</a> inside.</p>
        <p class="mbsc-medium"> Medium paragraph with a <a href="#">link</a> inside.</p>
        <p class="mbsc-thin"> Thin paragraph with a <a href="#">link</a> inside.</p>
        <p class="mbsc-italic"> Italic paragraph with a <a href="#">link</a> inside.</p>
    </div>
</div>

<mbsc-page>
    <div class="mbsc-padding">
        <p class="mbsc-bold"> Bold paragraph with a <a href="#">link</a> inside.</p>
        <p class="mbsc-medium"> Medium paragraph with a <a href="#">link</a> inside.</p>
        <p class="mbsc-thin"> Thin paragraph with a <a href="#">link</a> inside.</p>
        <p class="mbsc-italic"> Italic paragraph with a <a href="#">link</a> inside.</p>
    </div>
</mbsc-page>

<div mobiscroll-page>
    <div class="mbsc-padding">
        <p class="mbsc-bold"> Bold paragraph with a <a href="#">link</a> inside.</p>
        <p class="mbsc-medium"> Medium paragraph with a <a href="#">link</a> inside.</p>
        <p class="mbsc-thin"> Thin paragraph with a <a href="#">link</a> inside.</p>
        <p class="mbsc-italic"> Italic paragraph with a <a href="#">link</a> inside.</p>
    </div>
</div>

<mobiscroll.Page>
    <div className="mbsc-padding">
        <p className="mbsc-bold"> Bold paragraph with a <a href="#">link</a> inside.</p>
        <p className="mbsc-medium"> Medium paragraph with a <a href="#">link</a> inside.</p>
        <p className="mbsc-thin"> Thin paragraph with a <a href="#">link</a> inside.</p>
        <p className="mbsc-italic"> Italic paragraph with a <a href="#">link</a> inside.</p>
    </div>
</mobiscroll.Page>

<div data-bind="mobiscroll.page">
    <div class="mbsc-padding">
        <p class="mbsc-bold"> Bold paragraph with a <a href="#">link</a> inside.</p>
        <p class="mbsc-medium"> Medium paragraph with a <a href="#">link</a> inside.</p>
        <p class="mbsc-thin"> Thin paragraph with a <a href="#">link</a> inside.</p>
        <p class="mbsc-italic"> Italic paragraph with a <a href="#">link</a> inside.</p>
    </div>
</div>

The typography you can use

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Bold paragraph with a link inside.

Medium paragraph with a link inside.

Thin paragraph with a link inside.

Italic paragraph with a link inside.

<div mbsc-page>
    <div class="mbsc-padding">
        <p class="mbsc-bold"> Bold paragraph with a <a href="#">link</a> inside.</p>
        <p class="mbsc-medium"> Medium paragraph with a <a href="#">link</a> inside.</p>
        <p class="mbsc-thin"> Thin paragraph with a <a href="#">link</a> inside.</p>
        <p class="mbsc-italic"> Italic paragraph with a <a href="#">link</a> inside.</p>
    </div>
</div>

<mbsc-page>
    <div class="mbsc-padding">
        <p class="mbsc-bold"> Bold paragraph with a <a href="#">link</a> inside.</p>
        <p class="mbsc-medium"> Medium paragraph with a <a href="#">link</a> inside.</p>
        <p class="mbsc-thin"> Thin paragraph with a <a href="#">link</a> inside.</p>
        <p class="mbsc-italic"> Italic paragraph with a <a href="#">link</a> inside.</p>
    </div>
</mbsc-page>

<div mobiscroll-page>
    <div class="mbsc-padding">
        <p class="mbsc-bold"> Bold paragraph with a <a href="#">link</a> inside.</p>
        <p class="mbsc-medium"> Medium paragraph with a <a href="#">link</a> inside.</p>
        <p class="mbsc-thin"> Thin paragraph with a <a href="#">link</a> inside.</p>
        <p class="mbsc-italic"> Italic paragraph with a <a href="#">link</a> inside.</p>
    </div>
</div>

<mobiscroll.Page>
    <div className="mbsc-padding">
        <p className="mbsc-bold"> Bold paragraph with a <a href="#">link</a> inside.</p>
        <p className="mbsc-medium"> Medium paragraph with a <a href="#">link</a> inside.</p>
        <p className="mbsc-thin"> Thin paragraph with a <a href="#">link</a> inside.</p>
        <p className="mbsc-italic"> Italic paragraph with a <a href="#">link</a> inside.</p>
    </div>
</mobiscroll.Page>

<div data-bind="mobiscroll.page">
    <div class="mbsc-padding">
        <p class="mbsc-bold"> Bold paragraph with a <a href="#">link</a> inside.</p>
        <p class="mbsc-medium"> Medium paragraph with a <a href="#">link</a> inside.</p>
        <p class="mbsc-thin"> Thin paragraph with a <a href="#">link</a> inside.</p>
        <p class="mbsc-italic"> Italic paragraph with a <a href="#">link</a> inside.</p>
    </div>
</div>

The typography you can use

Slider

Work your way from a monotone, dropdown heavy form to an easily scannable page by switching controls. Consider using sliders for selecting one or multiple values from a range.

Continuous ranges, steps, floating value display, disabled styling and usage with icons is supported out of the box.

<label>
    Sound settings
    <input type="range" value="30" />
</label>

<mbsc-slider>Sound settings</mbsc-slider>
<label>
    Sound settings
    <input type="range" value="30" mobiscroll-slider ng-model="sliderProperty" />
</label>

<label>
    Sound settings
    <mobiscroll.Slider value={this.state.sound} onChange={this.setSound} />
</label>

<label>
    Sound settings
    <input type="range" value="30" data-bind="mobiscroll.slider: sliderProperty />
</label>

See how to use the slider
<label>
    Sound settings
    <input type="range" value="30" />
</label>

<mbsc-slider>Sound settings</mbsc-slider>
<label>
    Sound settings
    <input type="range" value="30" mobiscroll-slider ng-model="sliderProperty" />
</label>

<label>
    Sound settings
    <mobiscroll.Slider value={this.state.sound} onChange={this.setSound} />
</label>

<label>
    Sound settings
    <input type="range" value="30" data-bind="mobiscroll.slider: sliderProperty />
</label>

See how to use the slider

Progress

Provide visual feedback to the user. Reduce anxiety and help people understand progress with the control. You can also use it as a completness meter to show how the user does on completing a purchase.

With a powerful API control the state, value programtically and restart, pause it if you need to.

<label>
    Downloading file
    <progress id="download" value="0" max="100" data-val="right"></progress>
</label>

<mbsc-progress [value]="0" max="100" val="right">Downloading file</mbsc-progress>
<label>
    Downloading file
    <progress ng-model="downloadVal" value="0" max="100" data-val="right" mobiscroll-progress> </progress>
</label>

<label>
    Downloading file
    <mobiscroll.Progress value={this.state.downloadVal} max={100} data-val="right" />
</label>

<label>
    Downloading file
    <progress value="0" max="100" data-val="right" data-bind="mobiscroll.progress: downloadProgress" />
</label>

See how to use the progress
<label>
    Downloading file
    <progress id="download" value="0" max="100" data-val="right"></progress>
</label>

<mbsc-progress [value]="0" max="100" val="right">Downloading file</mbsc-progress>
<label>
    Downloading file
    <progress ng-model="downloadVal" value="0" max="100" data-val="right" mobiscroll-progress> </progress>
</label>

<label>
    Downloading file
    <mobiscroll.Progress value={this.state.downloadVal} max={100} data-val="right" />
</label>

<label>
    Downloading file
    <progress value="0" max="100" data-val="right" data-bind="mobiscroll.progress: downloadProgress" />
</label>

See how to use the progress

Alert, confirm and prompt

Show alert messages, confirmation dialogs and prompt for focused value entry. Supporting platform specific look & feel, make your users feel at home and communicate what they actually need to see.

These controls cannot be dismissed by pressing the overlay, avoiding closing it by mistake.

mobiscroll.alert({
    title: 'Cellular Data is Turned Off for "Safari"',
    message: 'You can turn on cellular data for this app in Settings.',
    callback: function () {
        //callback function
    }
});
mobiscroll.alert({
    title: 'Cellular Data is Turned Off for "Safari"',
    message: 'You can turn on cellular data for this app in Settings.',
    callback: function () {
        //callback function
    }
});
mobiscroll.alert({
    title: 'Cellular Data is Turned Off for "Safari"',
    message: 'You can turn on cellular data for this app in Settings.',
    callback: function () {
        //callback function
    }
});
mobiscroll.alert({
    title: 'Cellular Data is Turned Off for "Safari"',
    message: 'You can turn on cellular data for this app in Settings.',
    callback: function () {
        //callback function
    }
});
mobiscroll.alert({
    title: 'Cellular Data is Turned Off for "Safari"',
    message: 'You can turn on cellular data for this app in Settings.',
    callback: function () {
        //callback function
    }
});
Alert & Confirm
mobiscroll.alert({
    title: 'Cellular Data is Turned Off for "Safari"',
    message: 'You can turn on cellular data for this app in Settings.',
    callback: function () {
        //callback function
    }
});
mobiscroll.alert({
    title: 'Cellular Data is Turned Off for "Safari"',
    message: 'You can turn on cellular data for this app in Settings.',
    callback: function () {
        //callback function
    }
});
mobiscroll.alert({
    title: 'Cellular Data is Turned Off for "Safari"',
    message: 'You can turn on cellular data for this app in Settings.',
    callback: function () {
        //callback function
    }
});
mobiscroll.alert({
    title: 'Cellular Data is Turned Off for "Safari"',
    message: 'You can turn on cellular data for this app in Settings.',
    callback: function () {
        //callback function
    }
});
mobiscroll.alert({
    title: 'Cellular Data is Turned Off for "Safari"',
    message: 'You can turn on cellular data for this app in Settings.',
    callback: function () {
        //callback function
    }
});
Alert & Confirm

Toast and snackbar

Keep your users up to date with notifications. Either in form of a toast or a snackbar.

Choose to provide an action with the message, like UNDO or RETRY, something that helps the user make progress faster towards their desired goal.

mobiscroll.toast({
    message: 'Message sent.'
});
mobiscroll.toast({
    message: 'Message sent.'
});
mobiscroll.toast({
    message: 'Message sent.'
});
mobiscroll.toast({
    message: 'Message sent.'
});
mobiscroll.toast({
    message: 'Message sent.'
});
Notification & Toast
mobiscroll.toast({
    message: 'Message sent.'
});
mobiscroll.toast({
    message: 'Message sent.'
});
mobiscroll.toast({
    message: 'Message sent.'
});
mobiscroll.toast({
    message: 'Message sent.'
});
mobiscroll.toast({
    message: 'Message sent.'
});
Notification & Toast

Get started with building great forms

Sign up with your email and download the tools

Join great companies who takes their UI seriously

The only tool you'll ever need

Mobiscroll is framework agnostic. You can use it wherever Javascript runs. To help you be even more productive we ship UI for jQuery, Angular, React and plain Javascript.

Platform specific looks

Manually or automatically set the theme of your forms and pages on target platforms.
Need to show an iOS form on an iPhone and a Material form on Android? Here is your solution.

iOS
Account information
About you
General settings
On screen
Run countdown
Android
Account information
About you
General settings
On screen
Run countdown
Windows Phone
Account information
About you
General settings
On screen
Run countdown

Get even more functionality with a Framework license

Provide an amazing user experience with enhanced controls and UI elements.
Fine-tune the look & feel with the theme builder and enjoy dedicated technical support with one of the available licenses.

"We are using the Mobiscroll Calendar in one of our products.
Although it didn't come with the functionality we were looking for out of the box,
the support team went above and beyond to help me with the problem.

I was absolutely amazed by it and got so much more than I was expecting."

Tom Maddocks, Web Developer, Blueleaf

Easily add to existing projects or use it for brand new solutions

Available for plain Javascript, jQuery and jQuery Mobile, Angular JS, Angular, Ionic, React and for anywhere where Javascript runs.

Some of the smartest companies rely on mobiscroll for their UI

With well thought out components and a lot of edge cases handled make your app feel and be top notch.

Simple Pricing

Per component or for the whole set of tools

Mobiscroll Forms
FREE
 
Use it for free
Licensed under Apache v2

13 form elements included
Support iOS, Android and Windows Phone
Support mobile web and hybrid apps
Build with plain Javascript, jQuery, Angular, React or Knockout
No theme builder support
No icon set builder support
No technical support provided
Framework license
$395
31 UI Components
Shop Now
Get it with all controls as part of the full suite
30 Day
Money Back
Guarantee
Try it RISK-FREE. If you're not extremely satisfied with our product, you'll get a full refund within the first 30 days! No questions asked!
Need a more custom solution or additional functionality? Get in touch, we can help! Explore custom development services →
Customizable demos with source available for testing and download. Try and download demos →
Browse the extensive API documentation and see how to integrate, customize and tap into the Mobiscroll API for the Forms. Explore documentation & API reference →

Get started with Mobiscroll forms

Sign up with your email and download the tools

"We spend lots of time building web app forms to work with Mobiscroll, which is fantastic.

Your software makes ours perform great!"
Henson Yem, Senior Technology Consultant, Tang Computers