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

Get started with our free product
for building great Forms

View on Github Download for Free

Download for plain Javascript, jQuery & jQuery Mobile, Angular & Ionic, Angular JS or React

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 16 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 mbsc-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 mbsc-input type="text" id="first" placeholder="What's your first name?"/>
</label>


<mobiscroll.Input placeholder="What's your first name?">First Name</mobiscroll.Input>

<label>
    First Name
    <input mbsc-input type="text" id="first" placeholder="What's your first name?"/>
</label>
See text inputs in action
Single-line text
Multi-line text
<label>
    First Name
    <input mbsc-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 mbsc-input type="text" id="first" placeholder="What's your first name?"/>
</label>


<mobiscroll.Input placeholder="What's your first name?">First Name</mobiscroll.Input>

<label>
    First Name
    <input mbsc-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 mbsc-dropdown>
        <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 mbsc-dropdown>
        <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>


    
<mobiscroll.Dropdown label="Favorite Car">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</mobiscroll.Dropdown>
    

<label>
    Favorite Car
    <select mbsc-dropdown>
        <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
Select
<label>
    Favorite Car
    <select mbsc-dropdown>
        <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 mbsc-dropdown>
        <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>


    
<mobiscroll.Dropdown label="Favorite Car">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</mobiscroll.Dropdown>
    

<label>
    Favorite Car
    <select mbsc-dropdown>
        <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, colors 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 mbsc-button>Tag</button>
    <button mbsc-button>Favorite</button>
    <button mbsc-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 mbsc-button>Tag</button>
    <button mbsc-button>Favorite</button>
    <button mbsc-button>Flag</button>
</div>


<div className="mbsc-btn-group-justified">
    <mobiscroll.Button>Tag</mobiscroll.Button>
    <mobiscroll.Button>Favorite</mobiscroll.Button>
    <mobiscroll.Button>Flag</mobiscroll.Button>
</div>


<div class="mbsc-btn-group-justified">
    <button mbsc-button>Tag</button>
    <button mbsc-button>Favorite</button>
    <button mbsc-button>Flag</button>
</div>
Learn how to use the buttons in your forms
Buttons
Full width buttons
Justified buttons
Icons
Flat Buttons
<div class="mbsc-btn-group-justified">
    <button mbsc-button>Tag</button>
    <button mbsc-button>Favorite</button>
    <button mbsc-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 mbsc-button>Tag</button>
    <button mbsc-button>Favorite</button>
    <button mbsc-button>Flag</button>
</div>


<div className="mbsc-btn-group-justified">
    <mobiscroll.Button>Tag</mobiscroll.Button>
    <mobiscroll.Button>Favorite</mobiscroll.Button>
    <mobiscroll.Button>Flag</mobiscroll.Button>
</div>


<div class="mbsc-btn-group-justified">
    <button mbsc-button>Tag</button>
    <button mbsc-button>Favorite</button>
    <button mbsc-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 mbsc-segmented type="radio" data-role="segmented" name="range">
</label>
<label> Week
    <input mbsc-segmented type="radio" data-role="segmented" name="range">
</label>
<label> Month
    <input mbsc-segmented type="radio" data-role="segmented" name="range">
</label>
<label> Year
    <input mbsc-segmented 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 mbsc-segmented type="radio" data-role="segmented" name="range" ng-model="range" ng-checked="range == 'day'" value="day">
</label>
<label> Week
    <input mbsc-segmented type="radio" data-role="segmented" name="range" ng-model="range" ng-checked="range == 'week'" value="week">
</label>
<label> Month
    <input mbsc-segmented type="radio" data-role="segmented" name="range" ng-model="range" ng-checked="range == 'month'" value="month">
</label>
<label> Year
    <input mbsc-segmented type="radio" data-role="segmented" name="range" ng-model="range" ng-checked="range == 'year'" value="year">
</label>


<mobiscroll.Segmented name="range" value="day">Day</mobiscroll.Segmented>
<mobiscroll.Segmented name="range" value="week">Week</mobiscroll.Segmented>
<mobiscroll.Segmented name="range" value="month">Month</mobiscroll.Segmented>
<mobiscroll.Segmented name="range" value="year">Year</mobiscroll.Segmented>


<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
Single select
Multiple select
Text and Icon
Icon
Disabled
<label> Day
    <input mbsc-segmented type="radio" data-role="segmented" name="range">
</label>
<label> Week
    <input mbsc-segmented type="radio" data-role="segmented" name="range">
</label>
<label> Month
    <input mbsc-segmented type="radio" data-role="segmented" name="range">
</label>
<label> Year
    <input mbsc-segmented 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 mbsc-segmented type="radio" data-role="segmented" name="range" ng-model="range" ng-checked="range == 'day'" value="day">
</label>
<label> Week
    <input mbsc-segmented type="radio" data-role="segmented" name="range" ng-model="range" ng-checked="range == 'week'" value="week">
</label>
<label> Month
    <input mbsc-segmented type="radio" data-role="segmented" name="range" ng-model="range" ng-checked="range == 'month'" value="month">
</label>
<label> Year
    <input mbsc-segmented type="radio" data-role="segmented" name="range" ng-model="range" ng-checked="range == 'year'" value="year">
</label>


<mobiscroll.Segmented name="range" value="day">Day</mobiscroll.Segmented>
<mobiscroll.Segmented name="range" value="week">Week</mobiscroll.Segmented>
<mobiscroll.Segmented name="range" value="month">Month</mobiscroll.Segmented>
<mobiscroll.Segmented name="range" value="year">Year</mobiscroll.Segmented>


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


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


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


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


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


<mobiscroll.Radio name="lang">
    English
    <span className="mbsc-desc">Select for English audio and subtitles.</span>
</mobiscroll.Radio>
<mobiscroll.Radio name="lang">
    Spanish
    <span className="mbsc-desc">Select for Spanish audio and subtitles.</span>
</mobiscroll.Radio>


<label>
    <input mbsc-radio type="radio" name="lang">
    English
    <span class="mbsc-desc">Select for English audio and subtitles.</span>
</label>
<label>
    <input mbsc-radio 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
Radio buttons
<label>
    <input mbsc-radio type="radio" name="lang">
    English
    <span class="mbsc-desc">Select for English audio and subtitles.</span>
</label>
<label>
    <input mbsc-radio 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 mbsc-radio type="radio" name="lang">
    English
    <span class="mbsc-desc">Select for English audio and subtitles.</span>
</label>
<label>
    <input mbsc-radio type="radio" name="lang" checked>
    Spanish
    <span class="mbsc-desc">Select for Spanish audio and subtitles.</span>
</label>


<mobiscroll.Radio name="lang">
    English
    <span className="mbsc-desc">Select for English audio and subtitles.</span>
</mobiscroll.Radio>
<mobiscroll.Radio name="lang">
    Spanish
    <span className="mbsc-desc">Select for Spanish audio and subtitles.</span>
</mobiscroll.Radio>


<label>
    <input mbsc-radio type="radio" name="lang">
    English
    <span class="mbsc-desc">Select for English audio and subtitles.</span>
</label>
<label>
    <input mbsc-radio 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 mbsc-switch 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>
    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
Switch
<label>
    <input mbsc-switch 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>
    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 mbsc-stepper 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 min={1} max={15}>
    Adults
    <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
Passengers
From 14 years
2-14 years
0-2 years 
<div>
    <label for="md-adults">Adults</label>
    <span class="mbsc-desc">From 14 years</span>
    <input mbsc-stepper 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 min={1} max={15}>
    Adults
    <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 mbsc-slider 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>


<mobiscroll.Slider>
    Sound settings
</mobiscroll.Slider>


<label>
    Sound settings
    <input type="range" value="30" data-bind="mobiscroll.slider: sliderProperty />
</label>
See how to use the slider
Sound settings
<label>
    Sound settings
    <input mbsc-slider 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>


<mobiscroll.Slider>
    Sound settings
</mobiscroll.Slider>


<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 mbsc-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>


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


<label>
    Downloading file
    <progress value="0" max="100" data-val="right" data-bind="mobiscroll.progress: downloadProgress" />
</label>
See how to use the progress
Downloading file
<label>
    Downloading file
    <progress mbsc-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>


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


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

Rating

Provide means for users to rate items with the star rating control. It supports interaction with touch an mouse cursor. Highlight rating on hover and configure for full or half-value rating.

Shipping with multiple color presets, use it with the default stars or use custom font icons.

<label>
    Rate our service
    <input mbsc-rating data-role="rating" step=".5" min="0" max="3" value="1.5" />
</label>


<mbsc-rating [(value)]="steps" step=".5" min="0" max="3">Rate our service</mbsc-rating>

<label>
    Rate our service
    <input mobiscroll-rating step=".5" min="0" max="3" ng-model="ratingSteps" />
</label>


<mobiscroll.Rating step={.5} min={0} max={3} value={1.5}>
    Rate our service
</mobiscroll.Rating>




                See how to use the rating
            

        

        

            



    




	





































    



	
		
		
			
		
	
	
		
		
			
		
	
	
		
		
			
		
	
	
		
		
			
			
			
		
	







    




	
	


	
		
			
		
		
			
		
		
			
				
			
			
				
			
		
	


	
		
			
		
		
			
		
		
			
				
			
			
				
			
		
	


	
		
			
		
		
			
		
		
			
				
			
			
				
			
		
	






	
		
			
		
		
			
		
		
			
				
			
			
				
			
		
	


	
		
			
		
		
			
		
		
			
				
			
			
				
			
		
	


	
		
			
		
		
			
		
		
			
				
			
			
				
			
		
	


	
		
			
		
		
			
		
		
	







    



	
	
	
	



































            

            

                

            

            

                

                    
Rating

                    
                    
                    
                    
                    
                

            


    

	    
	    
    



    
	
<label>
    Rate our service
    <input mbsc-rating data-role="rating" step=".5" min="0" max="3" value="1.5" />
</label>



	
<mbsc-rating [(value)]="steps" step=".5" min="0" max="3">Rate our service</mbsc-rating>


	
<label>
    Rate our service
    <input mobiscroll-rating step=".5" min="0" max="3" ng-model="ratingSteps" />
</label>



	
<mobiscroll.Rating step={.5} min={0} max={3} value={1.5}>
    Rate our service
</mobiscroll.Rating>


	



            See how to use the progress
        

    


    

        

            

            

                
Alerts

                
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
    }
});



                See how to use alerts
            

        

        

            



    




	





































    



	
		
		
			
		
	
	
		
		
			
		
	
	
		
		
			
		
	
	
		
		
			
			
			
		
	







    




	
	


	
		
			
		
		
			
		
		
			
				
			
			
				
			
		
	


	
		
			
		
		
			
		
		
			
				
			
			
				
			
		
	


	
		
			
		
		
			
		
		
			
				
			
			
				
			
		
	






	
		
			
		
		
			
		
		
			
				
			
			
				
			
		
	


	
		
			
		
		
			
		
		
			
				
			
			
				
			
		
	


	
		
			
		
		
			
		
		
			
				
			
			
				
			
		
	


	
		
			
		
		
			
		
		
	







    



	
	
	
	



































            

            

                

            

            

                
Alerts

                

                    
                    
                    
                

            


    

	    
	    
    



    
	
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
    }
});



            See how to use alerts
        

    


    

        

            

            

                
Notifications

                
Keep your users up to date with notifications 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.'
});



                See how to use toast & snackbars
            
forms/notifications
        

        

            



    




	





































    



	
		
		
			
		
	
	
		
		
			
		
	
	
		
		
			
		
	
	
		
		
			
			
			
		
	







    




	
	


	
		
			
		
		
			
		
		
			
				
			
			
				
			
		
	


	
		
			
		
		
			
		
		
			
				
			
			
				
			
		
	


	
		
			
		
		
			
		
		
			
				
			
			
				
			
		
	






	
		
			
		
		
			
		
		
			
				
			
			
				
			
		
	


	
		
			
		
		
			
		
		
			
				
			
			
				
			
		
	


	
		
			
		
		
			
		
		
			
				
			
			
				
			
		
	


	
		
			
		
		
			
		
		
	







    



	
	
	
	



































            

            

                

            

            

                
Notifications

                

                    
                    
                    
                

            


    

	    
	    
    



    
	
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.'
});



            See how to use toast & snackbars
        

    



    

        

            

            

                
Notes

                
Communicate important messages to users and make them noticed.

                
Choose from the eight built in note styles and colors and use what fits best to your scenario.


    

	    
	    
    



    
	
<div class="mbsc-align-center">
    <div class="mbsc-note mbsc-note-primary">This is a primary note!</div>
    <div class="mbsc-note mbsc-note-secondary">This is a secondary note!</div>
    <div class="mbsc-note mbsc-note-success">This is a success note!</div>
    <div class="mbsc-note mbsc-note-danger">This is a danger note!</div>
    <div class="mbsc-note mbsc-note-warning">This is a warning note!</div>
    <div class="mbsc-note mbsc-note-info">This is a info note!</div>
    <div class="mbsc-note mbsc-note-light">This is a light note!</div>
    <div class="mbsc-note mbsc-note-dark">This is a dark note!</div>
</div>


	
<mbsc-page [options]="pageSettings">
    <mbsc-note color="primary">This is a primary note!</mbsc-note>
    <mbsc-note color="secondary">This is a secondary note!</mbsc-note>
    <mbsc-note color="success">This is a success note!</mbsc-note>
    <mbsc-note color="danger">This is a danger note!</mbsc-note>
    <mbsc-note color="warning">This is a warning note!</mbsc-note>
    <mbsc-note color="info">This is a info note!</mbsc-note>
    <mbsc-note color="light">This is a light note!</mbsc-note>
    <mbsc-note color="dark">This is a dark note!</mbsc-note>
</mbsc-page>


	
<div class="mbsc-align-center">
    <div class="mbsc-note mbsc-note-primary">This is a primary note!</div>
    <div class="mbsc-note mbsc-note-secondary">This is a secondary note!</div>
    <div class="mbsc-note mbsc-note-success">This is a success note!</div>
    <div class="mbsc-note mbsc-note-danger">This is a danger note!</div>
    <div class="mbsc-note mbsc-note-warning">This is a warning note!</div>
    <div class="mbsc-note mbsc-note-info">This is a info note!</div>
    <div class="mbsc-note mbsc-note-light">This is a light note!</div>
    <div class="mbsc-note mbsc-note-dark">This is a dark note!</div>
</div>


	
<div className="mbsc-align-center">
    <mobiscroll.Note color="primary">This is a primary note!</mobiscroll.Note>
    <mobiscroll.Note color="secondary">This is a secondary note!</mobiscroll.Note>
    <mobiscroll.Note color="success">This is a success note!</mobiscroll.Note>
    <mobiscroll.Note color="danger">This is a danger note!</mobiscroll.Note>
    <mobiscroll.Note color="warning">This is a warning note!</mobiscroll.Note>
    <mobiscroll.Note color="info">This is a info note!</mobiscroll.Note>
    <mobiscroll.Note color="light">This is a light note!</mobiscroll.Note>
    <mobiscroll.Note color="dark">This is a dark note!</mobiscroll.Note>
</div>


	
<div class="mbsc-align-center">
    <div class="mbsc-note mbsc-note-primary">This is a primary note!</div>
    <div class="mbsc-note mbsc-note-secondary">This is a secondary note!</div>
    <div class="mbsc-note mbsc-note-success">This is a success note!</div>
    <div class="mbsc-note mbsc-note-danger">This is a danger note!</div>
    <div class="mbsc-note mbsc-note-warning">This is a warning note!</div>
    <div class="mbsc-note mbsc-note-info">This is a info note!</div>
    <div class="mbsc-note mbsc-note-light">This is a light note!</div>
    <div class="mbsc-note mbsc-note-dark">This is a dark note!</div>
</div>




                See how to use notes
            

        

        

            



    




	





































    



	
		
		
			
		
	
	
		
		
			
		
	
	
		
		
			
		
	
	
		
		
			
			
			
		
	







    




	
	


	
		
			
		
		
			
		
		
			
				
			
			
				
			
		
	


	
		
			
		
		
			
		
		
			
				
			
			
				
			
		
	


	
		
			
		
		
			
		
		
			
				
			
			
				
			
		
	






	
		
			
		
		
			
		
		
			
				
			
			
				
			
		
	


	
		
			
		
		
			
		
		
			
				
			
			
				
			
		
	


	
		
			
		
		
			
		
		
			
				
			
			
				
			
		
	


	
		
			
		
		
			
		
		
	







    



	
	
	
	



































            

            

                

            

            

                
Notes

                

                    
This is a primary note!

                    
This is a secondary note!

                    
This is a success note!

                    
This is a danger note!

                    
This is a warning note!

                    
This is a info note!

                    
This is a light note!

                    
This is a dark note!

                

            


    

	    
	    
    



    
	
<div class="mbsc-align-center">
    <div class="mbsc-note mbsc-note-primary">This is a primary note!</div>
    <div class="mbsc-note mbsc-note-secondary">This is a secondary note!</div>
    <div class="mbsc-note mbsc-note-success">This is a success note!</div>
    <div class="mbsc-note mbsc-note-danger">This is a danger note!</div>
    <div class="mbsc-note mbsc-note-warning">This is a warning note!</div>
    <div class="mbsc-note mbsc-note-info">This is a info note!</div>
    <div class="mbsc-note mbsc-note-light">This is a light note!</div>
    <div class="mbsc-note mbsc-note-dark">This is a dark note!</div>
</div>


	
<mbsc-page [options]="pageSettings">
    <mbsc-note color="primary">This is a primary note!</mbsc-note>
    <mbsc-note color="secondary">This is a secondary note!</mbsc-note>
    <mbsc-note color="success">This is a success note!</mbsc-note>
    <mbsc-note color="danger">This is a danger note!</mbsc-note>
    <mbsc-note color="warning">This is a warning note!</mbsc-note>
    <mbsc-note color="info">This is a info note!</mbsc-note>
    <mbsc-note color="light">This is a light note!</mbsc-note>
    <mbsc-note color="dark">This is a dark note!</mbsc-note>
</mbsc-page>


	
<div class="mbsc-align-center">
    <div class="mbsc-note mbsc-note-primary">This is a primary note!</div>
    <div class="mbsc-note mbsc-note-secondary">This is a secondary note!</div>
    <div class="mbsc-note mbsc-note-success">This is a success note!</div>
    <div class="mbsc-note mbsc-note-danger">This is a danger note!</div>
    <div class="mbsc-note mbsc-note-warning">This is a warning note!</div>
    <div class="mbsc-note mbsc-note-info">This is a info note!</div>
    <div class="mbsc-note mbsc-note-light">This is a light note!</div>
    <div class="mbsc-note mbsc-note-dark">This is a dark note!</div>
</div>


	
<div className="mbsc-align-center">
    <mobiscroll.Note color="primary">This is a primary note!</mobiscroll.Note>
    <mobiscroll.Note color="secondary">This is a secondary note!</mobiscroll.Note>
    <mobiscroll.Note color="success">This is a success note!</mobiscroll.Note>
    <mobiscroll.Note color="danger">This is a danger note!</mobiscroll.Note>
    <mobiscroll.Note color="warning">This is a warning note!</mobiscroll.Note>
    <mobiscroll.Note color="info">This is a info note!</mobiscroll.Note>
    <mobiscroll.Note color="light">This is a light note!</mobiscroll.Note>
    <mobiscroll.Note color="dark">This is a dark note!</mobiscroll.Note>
</div>


	
<div class="mbsc-align-center">
    <div class="mbsc-note mbsc-note-primary">This is a primary note!</div>
    <div class="mbsc-note mbsc-note-secondary">This is a secondary note!</div>
    <div class="mbsc-note mbsc-note-success">This is a success note!</div>
    <div class="mbsc-note mbsc-note-danger">This is a danger note!</div>
    <div class="mbsc-note mbsc-note-warning">This is a warning note!</div>
    <div class="mbsc-note mbsc-note-info">This is a info note!</div>
    <div class="mbsc-note mbsc-note-light">This is a light note!</div>
    <div class="mbsc-note mbsc-note-dark">This is a dark note!</div>
</div>




            See how to use notes
        

    


    

        

            

            

                
Grid layout

                
A powerful flexbox system for building custom layouts of all shapes and sizes.

                
It has a twelve column layout with different breakpoints depending on the size of the screen or the predefined CSS class.


    

	    
	    
    



    
	
<div class="mbsc-grid">
    <div class="mbsc-row">
        <div class="mbsc-col">1 of 2</div>
        <div class="mbsc-col">2 of 2</div>
    </div>
    <div class="mbsc-row">
        <div class="mbsc-col-3">col 3</div>
        <div class="mbsc-col-6">col 6</div>
        <div class="mbsc-col-3">col 3</div>
    </div>
    <div class="mbsc-row">
        <div class="mbsc-col-9">col 9</div>
        <div class="mbsc-col">col</div>
    </div>
    <div class="mbsc-row">
        <div class="mbsc-col-sm-auto">auto width column</div>
        <div class="mbsc-col">col</div>
    </div>
</div>


	
<div class="mbsc-grid">
    <div class="mbsc-row">
        <div class="mbsc-col">1 of 2</div>
        <div class="mbsc-col">2 of 2</div>
    </div>
    <div class="mbsc-row">
        <div class="mbsc-col-3">col 3</div>
        <div class="mbsc-col-6">col 6</div>
        <div class="mbsc-col-3">col 3</div>
    </div>
    <div class="mbsc-row">
        <div class="mbsc-col-9">col 9</div>
        <div class="mbsc-col">col</div>
    </div>
    <div class="mbsc-row">
        <div class="mbsc-col-sm-auto">auto width column</div>
        <div class="mbsc-col">col</div>
    </div>
</div>


	
<div class="mbsc-grid">
    <div class="mbsc-row">
        <div class="mbsc-col">1 of 2</div>
        <div class="mbsc-col">2 of 2</div>
    </div>
    <div class="mbsc-row">
        <div class="mbsc-col-3">col 3</div>
        <div class="mbsc-col-6">col 6</div>
        <div class="mbsc-col-3">col 3</div>
    </div>
    <div class="mbsc-row">
        <div class="mbsc-col-9">col 9</div>
        <div class="mbsc-col">col</div>
    </div>
    <div class="mbsc-row">
        <div class="mbsc-col-sm-auto">auto width column</div>
        <div class="mbsc-col">col</div>
    </div>
</div>


	
<div className="mbsc-grid">
    <div className="mbsc-row">
        <div className="mbsc-col">1 of 2</div>
        <div className="mbsc-col">2 of 2</div>
    </div>
    <div className="mbsc-row">
        <div className="mbsc-col-3">col 3</div>
        <div className="mbsc-col-6">col 6</div>
        <div className="mbsc-col-3">col 3</div>
    </div>
    <div className="mbsc-row">
        <div className="mbsc-col-9">col 9</div>
        <div className="mbsc-col">col</div>
    </div>
    <div className="mbsc-row">
        <div className="mbsc-col-sm-auto">auto width column</div>
        <div className="mbsc-col">col</div>
    </div>
</div>


	
<div class="mbsc-grid">
    <div class="mbsc-row">
        <div class="mbsc-col">1 of 2</div>
        <div class="mbsc-col">2 of 2</div>
    </div>
    <div class="mbsc-row">
        <div class="mbsc-col-3">col 3</div>
        <div class="mbsc-col-6">col 6</div>
        <div class="mbsc-col-3">col 3</div>
    </div>
    <div class="mbsc-row">
        <div class="mbsc-col-9">col 9</div>
        <div class="mbsc-col">col</div>
    </div>
    <div class="mbsc-row">
        <div class="mbsc-col-sm-auto">auto width column</div>
        <div class="mbsc-col">col</div>
    </div>
</div>




                See how to use grid layout
            

        

        

            



    




	





































    



	
		
		
			
		
	
	
		
		
			
		
	
	
		
		
			
		
	
	
		
		
			
			
			
		
	







    




	
	


	
		
			
		
		
			
		
		
			
				
			
			
				
			
		
	


	
		
			
		
		
			
		
		
			
				
			
			
				
			
		
	


	
		
			
		
		
			
		
		
			
				
			
			
				
			
		
	






	
		
			
		
		
			
		
		
			
				
			
			
				
			
		
	


	
		
			
		
		
			
		
		
			
				
			
			
				
			
		
	


	
		
			
		
		
			
		
		
			
				
			
			
				
			
		
	


	
		
			
		
		
			
		
		
	







    



	
	
	
	



































            

            

                

            

            

                
Grid layout

                

                    

                        
1 of 2

                        
2 of 2

                    

                    

                        
col 3

                        
col 6

                        
col 3

                    

                    

                        
col 9

                        
col

                    

                    

                        
auto width column

                        
col

                    

                

            


    

	    
	    
    



    
	
<div class="mbsc-grid">
    <div class="mbsc-row">
        <div class="mbsc-col">1 of 2</div>
        <div class="mbsc-col">2 of 2</div>
    </div>
    <div class="mbsc-row">
        <div class="mbsc-col-3">col 3</div>
        <div class="mbsc-col-6">col 6</div>
        <div class="mbsc-col-3">col 3</div>
    </div>
    <div class="mbsc-row">
        <div class="mbsc-col-9">col 9</div>
        <div class="mbsc-col">col</div>
    </div>
    <div class="mbsc-row">
        <div class="mbsc-col-sm-auto">auto width column</div>
        <div class="mbsc-col">col</div>
    </div>
</div>


	
<div class="mbsc-grid">
    <div class="mbsc-row">
        <div class="mbsc-col">1 of 2</div>
        <div class="mbsc-col">2 of 2</div>
    </div>
    <div class="mbsc-row">
        <div class="mbsc-col-3">col 3</div>
        <div class="mbsc-col-6">col 6</div>
        <div class="mbsc-col-3">col 3</div>
    </div>
    <div class="mbsc-row">
        <div class="mbsc-col-9">col 9</div>
        <div class="mbsc-col">col</div>
    </div>
    <div class="mbsc-row">
        <div class="mbsc-col-sm-auto">auto width column</div>
        <div class="mbsc-col">col</div>
    </div>
</div>


	
<div class="mbsc-grid">
    <div class="mbsc-row">
        <div class="mbsc-col">1 of 2</div>
        <div class="mbsc-col">2 of 2</div>
    </div>
    <div class="mbsc-row">
        <div class="mbsc-col-3">col 3</div>
        <div class="mbsc-col-6">col 6</div>
        <div class="mbsc-col-3">col 3</div>
    </div>
    <div class="mbsc-row">
        <div class="mbsc-col-9">col 9</div>
        <div class="mbsc-col">col</div>
    </div>
    <div class="mbsc-row">
        <div class="mbsc-col-sm-auto">auto width column</div>
        <div class="mbsc-col">col</div>
    </div>
</div>


	
<div className="mbsc-grid">
    <div className="mbsc-row">
        <div className="mbsc-col">1 of 2</div>
        <div className="mbsc-col">2 of 2</div>
    </div>
    <div className="mbsc-row">
        <div className="mbsc-col-3">col 3</div>
        <div className="mbsc-col-6">col 6</div>
        <div className="mbsc-col-3">col 3</div>
    </div>
    <div className="mbsc-row">
        <div className="mbsc-col-9">col 9</div>
        <div className="mbsc-col">col</div>
    </div>
    <div className="mbsc-row">
        <div className="mbsc-col-sm-auto">auto width column</div>
        <div className="mbsc-col">col</div>
    </div>
</div>


	
<div class="mbsc-grid">
    <div class="mbsc-row">
        <div class="mbsc-col">1 of 2</div>
        <div class="mbsc-col">2 of 2</div>
    </div>
    <div class="mbsc-row">
        <div class="mbsc-col-3">col 3</div>
        <div class="mbsc-col-6">col 6</div>
        <div class="mbsc-col-3">col 3</div>
    </div>
    <div class="mbsc-row">
        <div class="mbsc-col-9">col 9</div>
        <div class="mbsc-col">col</div>
    </div>
    <div class="mbsc-row">
        <div class="mbsc-col-sm-auto">auto width column</div>
        <div class="mbsc-col">col</div>
    </div>
</div>




            See how to use grid layout
        

    

    


    






    

        
Get started with building great Forms

        Download now
        

            
Join great companies who take 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.
        

        

            

                
            

            

                

                    

                        

                            

                            

                            

                            

                            

                            

                            

                            

                            

                            

                        

                        

                            

                            

                            

                            

                            

                            

                            

                            

                            

                        

                    

                    

                        

                            

                            

                            

                            
                        

                    

                    

                        

                            

                            

                            

                            
                        

                    

                    

                        

                            

                            

                            

                            
                        

                    

                    

                        

                            

                            
Submit a support ticket

                            
Send a message from the website

                        

                    

                

            

        

    






    

        

            

                
                

                    "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


                
 

            

            Download
            

                Licensed under Apache v2


            


            

                
16 elements included

                
Support iOS, Android and Windows Phone

                
Support mobile web and hybrid apps

                
Build with plain Javascript, jQuery, Angular, AngularJS or React

                
No theme builder support

                
No icon set builder support

                
No technical support provided

            

        

        

            

                

                    
Framework license



                    $595
                    
36 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 our free product for building great Forms

                        Download now
                        
Make your pages and forms look great and work great

                    


                

                    

                        
                    

                    

                        
                    

                    
                    

                        "Once we started using Mobiscroll, our conversions have improved and the experience became much more delightful!"
                    

                    

                        Daniel Maldonado, Sr. Web Designer, Ecommission Financial Services
                    

                

            

        

        

            
        

    









    





    


    
    













    
    
    





            
            🎉
            
Latest version released: v5.22.2

            

                Released 
                                three weeks ago