Contents

Forms

About

The form component adds styling to standard html form elements (textboxes, textareas, selects, checkboxes, radio buttons, submit buttons) giving them a native like look and feel on various platforms.

Initialization

Auto initialization

To auto-initialize the form elements, simply put the mbsc-form attribute on the container element. The form elements inside the container will be automatically intialized when the page is loaded.

<div id="myform" mbsc-form>
    <label>
        Username
        <input id="username" />
    </label>
    <label>
        Password
        <input id="password" type="password" />
    </label>
    <button type="submit">Sign In</button>
</div>

The initialization will use the default options. The defaults can be set in the mobiscroll.settings object, after the Mobiscroll scripts are loaded, but before the page load (document ready) event is fired, in order to have effect on the form initialization.

mobiscroll.settings = {
    theme: 'ios',
    lang: 'de'
};

If the form container is added later to the DOM, e.g. with an Ajax page load, a custom event named mbsc-enhance needs to be triggered in order to initialize the dynamically added content.
When the mbsc-enhance event is triggered on a DOM element, all form elements will be initialized inside all descendant elements with the mbsc-form attribute (including itself).

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == XMLHttpRequest.DONE) {
        var page = document.getElementByID('page');
        page.innerHTML = xhr.responseText;
        page.dispatchEvent(new Event('mbsc-enhance')); 
    }
}
xhr.open('GET', '/myform', true);
xhr.send();
    

Manual Initialization

The form can also initialized manually, just like any other Mobiscroll component.

HTML
<div id="myform">
    <label>
        Username
        <input id="username" />
    </label>
    <label>
        Password
        <input id="password" type="password" />
    </label>
    <button type="submit">Sign In</button>
</div>
Javascript
mobiscroll.form('#myform', {
    theme: 'material'
});

If the form container is added later to the DOM, e.g. with an Ajax page load, call the initialization right after the content is appended in the DOM.

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == XMLHttpRequest.DONE) {
        var page = document.getElementByID('page'),

        page.innerHTML = xhr.responseText;

        mobiscroll.form('#myform', {
            theme: 'mobiscroll'
        });
    }
}
xhr.open('GET', '/myform', true);
xhr.send();

When elements are dynamically added to an already initialized form, call the refresh method to initialize the new elements.

mobiscrollInstance.refresh();

Options

Name Type Default value Description
context String or HTMLElement 'body' Context in which mobiscroll is appended and positioned (if not inline). Can be a selector string or a DOM element.
theme String undefined Sets the visual appearance of the component.

If it is 'auto' or 'undefined', the theme will automatically be chosen based on the platform. If the theme for the specific platform is not present, it will revert to the Mobiscroll theme.

Supplied themes:
  • 'android-holo' - Android 4.x theme
  • 'android-holo-light' - Android 4.x theme (light version)
  • 'ios' - new iOS 7, 8, 9 theme
  • 'material' - Material theme (Android 5.x)
  • 'material-dark' - Material dark theme (Android 5.x)
  • 'mobiscroll' - Mobiscroll theme
  • 'mobiscroll-dark' - Mobiscroll Dark theme
  • 'wp' - Windows Phone Metro UI theme
  • 'wp-light' - Windows Phone Metro UI theme (light version)
It's possible to create custom themes in css by prefixing any css class used in the forms markup with the theme name and the 'mbsc' prefix, e.g.: .mbsc-my-theme .dwwr { /* My CSS */ }, and set the theme option to 'my-theme'
Make sure that the theme you set is included in the downloaded package.

Events

Name Description
onInit(event, inst) Triggered when the component is initialized.

Parameters

  • event: Object - The event object.
  • inst: Object - The instance object of the forms.

Example

mobiscroll.forms('#mobiscroll', {
    onInit: function (event, inst) {
    }
});

Methods

Name Description
getInst() Returns the object instance.

Returns: Object

  • The object instance.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.getInst();
option(options) Sets one or more options for the component.

Parameters

  • options: Object - A map of option-value pairs to set.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.option({
    display: 'bottom',
    lang: 'de'
});
refresh() Initialize dynamically added form elements.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.refresh();
tap(el, handler) Attaches the handler function to the tap event of element el.

Parameters

  • el: Object - The element with tap event.
  • handler: Function - If the action was initiated with touch event, handler is called on touchend, otherwise on click.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.tap('#element', function () { alert("It's a tap!"); });

Localization

Name Type Default value Description
lang String 'en-US' Language of the component. Based on the language string the component loads the language based default settings from the language modules.
Supported languages:
  • 'en' or 'en-US' or undefined - English
  • 'en-UK' or 'en-GB' - English (UK)
  • 'cs' - Czech
  • 'zh' - Chinese
  • 'da' - Danish
  • 'de' - German
  • 'es' - Spanish
  • 'fa' - Farsi
  • 'fr' - French
  • 'it' - Italian
  • 'ja' - Japanese
  • 'hu' - Hungarian
  • 'nl' - Dutch
  • 'no' - Norwegian
  • 'pl' - Polish
  • 'pt-BR' - Brazilian Portuguese
  • 'pt-PT' - European Portuguese
  • 'ro' - Romanian
  • 'ru' - Russian
  • 'ru-UA' - Russian (UA)
  • 'sk' - Slovak
  • 'sv' - Swedish
  • 'tr' - Turkish
offText String 'Off' Text of the switch button when it's turned off, only for Android Holo switch.
onText String 'On' Text of the switch button when it's turned on, only for Android Holo switch.
rtl Boolean false Right to left display.

Textfields

Textbox

Wrapped in label element
<label>
    Username
    <input id="username" />
</label>
Wrapped in div element
<div>
    <label for="username">Username</label>
    <input id="username" />
</div>
Without label
<div>
    <input id="username" placeholder="Username" />
</div>
With left icon
<label>
    Email
    <input id="email" type="email" data-icon="ion-ios7-email" />
</label>
With right icon
<label>
    Email
    <input id="email" type="email" data-icon="ion-ios7-email" data-icon-align="right"/>
</label>

Password

The password toggle can be used to hide or show the entered password using icons

Without toggle
<input type="password" placeholder="Password">
With icons
<input type="text" placeholder="Password" data-password-toggle="true" data-icon-show="eye" data-icon-hide="eye-blocked">
With custom icons
<input type="text" placeholder="Password" data-password-toggle="true" data-icon-show="my-show-icon" data-icon-hide="my-hide-icon"/>

Textarea

Textareas will auto-grow based on the entered content up until to 10 lines. After 10 lines scroll is enabled.

Wrapped in label element
<label>
    About me
    <textarea id="aboutme"></textarea>
</label>
Wrapped in div element
<div>
    <label for="aboutme">About me</label>
    <textarea id="aboutme"></textarea>
</div>
Without label
<div>
    <textarea id="aboutme" placeholder="About me"></textarea>
</div>
With left icon
<label>
    About me
    <textarea id="aboutme" data-icon="line-note"></textarea>
</label>
With right icon
<label>
    About me
    <textarea id="aboutme" data-icon="line-note" data-icon-align="right"></textarea>
</label>

Attributes

Name Description
data-enhance If a form element has the data-enhance="false" attribute, the particular element won't be enhanced.
data-icon Specify icons for a button, textbox, textarea , stepper, segmented control, slider, progress or select. A font-icon name should be passed.

Icon alignment can be controlled with the data-icon-align attribute. Icons can be displayed on both sides by passing and object with left and right properties containing icon names, e.g.: data-icon='{ "right": "plus", "left": "minus" }'.
You can build your custom icon set on our download page ("Choose Icon Set" section).

See the full list of available icons here.

The default icon pack contains the following icons:
  • home
  • pencil
  • office
  • newspaper
  • droplet
  • image2
  • camera
  • play
  • bullhorn
  • connection
  • library
  • book
  • file4
  • copy2
  • copy3
  • stack
  • folder
  • tag
  • cart
  • support
  • phone
  • location
  • credit
  • map
  • history
  • clock
  • alarm2
  • stopwatch
  • calendar
  • mobile
  • drawer
  • undo2
  • redo2
  • forward
  • reply
  • bubble
  • bubbles
  • disk
  • download
  • upload
  • user4
  • key2
  • lock2
  • unlocked
  • cogs
  • aid
  • bars
  • cloud-download
  • cloud-upload
  • globe
  • airplane
  • earth
  • link
  • flag
  • eye
  • eye-blocked
  • attachment
  • star3
  • heart
  • thumbs-up
  • thumbs-up2
  • smiley2
  • sad2
  • checkmark
  • close
  • plus
  • minus
  • remove
  • loop2
You can use the icons anywhere in your app using the mbsc-ic mbsc-ic-{iconName} classes, e.g.:
<div class="mbsc-ic mbsc-ic-star"></div>
data-icon-align Specify icon alignment. It can be "left" or "right", it defaults to "left" if not specified.
data-icon-hide Specify icon for hide password. It can be any valid icon name, it defaults to "eye-blocked" if not specified.
data-icon-show Specify icon for show password. It can be any valid icon name, it defaults to "eye" if not specified.
data-password-toggle If the input of a password field has the data-password-toggle="true" attribute, the visibility of the password can be toggled.
disabled If an element has the disabled attribute, the element will be disabled.

Select

Wrapped in label element
<label>
    Choose one
    <select id="choose">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
</label>
Wrapped in div element
<div>
    <label for="choose">Choose one</label>
    <select id="choose">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
</div>
Without label
<div>
    <select id="choose">
        <option value="">Choose one</option>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
</div>
With left icon
<label>
    Choose one
    <select id="choose" data-icon="line-note">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
</label>
With right icon
<label>
    Choose one
    <select id="choose" data-icon="line-note" data-icon-align="right">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
</label>

Attributes

Name Description
data-enhance If a form element has the data-enhance="false" attribute, the particular element won't be enhanced.
data-icon Specify icons for a button, textbox, textarea , stepper, segmented control, slider, progress or select. A font-icon name should be passed.

Icon alignment can be controlled with the data-icon-align attribute. Icons can be displayed on both sides by passing and object with left and right properties containing icon names, e.g.: data-icon='{ "right": "plus", "left": "minus" }'.
You can build your custom icon set on our download page ("Choose Icon Set" section).

See the full list of available icons here.

The default icon pack contains the following icons:
  • home
  • pencil
  • office
  • newspaper
  • droplet
  • image2
  • camera
  • play
  • bullhorn
  • connection
  • library
  • book
  • file4
  • copy2
  • copy3
  • stack
  • folder
  • tag
  • cart
  • support
  • phone
  • location
  • credit
  • map
  • history
  • clock
  • alarm2
  • stopwatch
  • calendar
  • mobile
  • drawer
  • undo2
  • redo2
  • forward
  • reply
  • bubble
  • bubbles
  • disk
  • download
  • upload
  • user4
  • key2
  • lock2
  • unlocked
  • cogs
  • aid
  • bars
  • cloud-download
  • cloud-upload
  • globe
  • airplane
  • earth
  • link
  • flag
  • eye
  • eye-blocked
  • attachment
  • star3
  • heart
  • thumbs-up
  • thumbs-up2
  • smiley2
  • sad2
  • checkmark
  • close
  • plus
  • minus
  • remove
  • loop2
You can use the icons anywhere in your app using the mbsc-ic mbsc-ic-{iconName} classes, e.g.:
<div class="mbsc-ic mbsc-ic-star"></div>
data-icon-align Specify icon alignment. It can be "left" or "right", it defaults to "left" if not specified.
disabled If an element has the disabled attribute, the element will be disabled.
If the select's value is updated programatically, a change event needs to be triggered to update the value of the Mobiscroll Form Select as well.
mobiscroll.$('#myselect').val(4).trigger('change');

Checkbox

Wrapped in label element
<label>
    I agree
    <input id="agree" type="checkbox" />
</label>
Wrapped in div element
<div>
    <label for="agree">I agree</label>
    <input id="agree" type="checkbox" />
</div>
With description
<label>
    I agree
    <span class="mbsc-desc">Sample description</span>
    <input id="agree" type="checkbox" />
</label>

Attributes

Name Description
checked If an input element has the checked attribute, the element will be pre-selected (checked) when the page loads.
data-enhance If a form element has the data-enhance="false" attribute, the particular element won't be enhanced.
disabled If an element has the disabled attribute, the element will be disabled.

Switch

Switches are bascially also checkboxes, but with a different style. To make a switch, add the data-role="switch" attribute to a checkbox.

Wrapped in label element
<label>
    I agree
    <input id="agree" type="checkbox" data-role="switch" />
</label>
Wrapped in div element
<div>
    <label for="agree">I agree</label>
    <input id="agree" type="checkbox" data-role="switch" />
</div>
With description
<label>
    I agree
    <span class="mbsc-desc">Sample description</span>
    <input id="agree" type="checkbox" data-role="switch" />
</label>

Attributes

Name Description
checked If an input element has the checked attribute, the element will be pre-selected (checked) when the page loads.
data-enhance If a form element has the data-enhance="false" attribute, the particular element won't be enhanced.
data-role If a checkbox input has the data-role="switch" attribute, it will be transformed into a switch.
disabled If an element has the disabled attribute, the element will be disabled.

Methods

Name Description
getVal() Returns the state of the switch (true/false).

Returns: Boolean

  • The state of the switch value.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.getVal();
setVal(value) Sets the state of the switch (true/false).

Parameters

  • value: Boolean - The state of the switch value.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.setVal(false);

Radio Buttons

<label>
    <input type="radio" name="group" />Radio Label 1
    <span class="mbsc-desc">This is description for radio 1</span>
</label>
<label>
    <input type="radio" name="group" />Radio Label 2
    <span class="mbsc-desc">This is description for radio 2</span>
</label>

Attributes

Name Description
checked If an input element has the checked attribute, the element will be pre-selected (checked) when the page loads.
data-enhance If a form element has the data-enhance="false" attribute, the particular element won't be enhanced.
disabled If an element has the disabled attribute, the element will be disabled.

Buttons

Simple button
<button>Button</button>
With icon
<button data-icon="plus">Text & Icon</button>
Icon button
<button data-icon="plus"></button>
Flat button
<button class="mbsc-btn-flat">Flat</button>
Flat button with icon
<button class="mbsc-btn-flat" data-icon="arrow-left5">Flat & Icon</button>
Flat icon button
<button class="mbsc-btn-flat" data-icon="plus"></button>
Full width button
<button class="mbsc-btn-block">Full width Button</button>
Button group
<div class="mbsc-btn-group">
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
</div>
Justified button group
<!-- Buttons are streched to fill the full width of the container.-->
<div class="mbsc-btn-group-justified">
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
</div>
Full width button group
<!-- Each button fills the whole width of the container. -->
<div class="mbsc-btn-group-block">
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
</div>

Attributes

Name Description
data-enhance If a form element has the data-enhance="false" attribute, the particular element won't be enhanced.
data-icon Specify icons for a button, textbox, textarea , stepper, segmented control, slider, progress or select. A font-icon name should be passed.

You can build your custom icon set on our download page ("Choose Icon Set" section).

See the full list of available icons here.

The default icon pack contains the following icons:
  • home
  • pencil
  • office
  • newspaper
  • droplet
  • image2
  • camera
  • play
  • bullhorn
  • connection
  • library
  • book
  • file4
  • copy2
  • copy3
  • stack
  • folder
  • tag
  • cart
  • support
  • phone
  • location
  • credit
  • map
  • history
  • clock
  • alarm2
  • stopwatch
  • calendar
  • mobile
  • drawer
  • undo2
  • redo2
  • forward
  • reply
  • bubble
  • bubbles
  • disk
  • download
  • upload
  • user4
  • key2
  • lock2
  • unlocked
  • cogs
  • aid
  • bars
  • cloud-download
  • cloud-upload
  • globe
  • airplane
  • earth
  • link
  • flag
  • eye
  • eye-blocked
  • attachment
  • star3
  • heart
  • thumbs-up
  • thumbs-up2
  • smiley2
  • sad2
  • checkmark
  • close
  • plus
  • minus
  • remove
  • loop2
You can use the icons anywhere in your app using the mbsc-ic mbsc-ic-{iconName} classes, e.g.:
<div class="mbsc-ic mbsc-ic-star"></div>
disabled If an element has the disabled attribute, the element will be disabled.

Slider

The slider control can be used to select one or more numeric value.
Inputs with type="range" will be transformed into slider controls.
If multiple range inputs are wrapped in the same container, multiple handles will be displayed on the slider track.

Simple slider
<label>
    <input type="range"  />
</label>
Slider with tooltip
<label>
    <input type="range" data-tooltip="true" />
</label>
With value and template
<label>
    Label 
    <input type="range" data-val="left" data-template="{value}/{max}">
</label>
With steps and step labels
<label>
    Step labels 1
    <input type="range" data-tooltip="true" step="25" data-step-labels="[0, 25, 50, 75, 100]">
</label>
With icon and value
<label>
    Icon and value
    <input type="range" data-icon="plus" min="22"  step="10" value="32" max="119" data-val="right" data-template="${value}">
</label>
With two handles
<label>
    Two handles
    <input type="range" value="25" step="25">
    <input type="range" value="75">
</label>
With four handles
<label>
    Multiple handles
    <input type="range" value="5" data-tooltip="true">
    <input type="range" value="15" data-tooltip="true">
    <input type="range" value="55" data-tooltip="true">
    <input type="range" value="75" data-tooltip="true">
</label>

Attributes

Name Description
data-highlight If an input has the data-highlight="false" attribute, only the handles are highlighted and the progress bar is not.
data-icon Specify icons for a button, textbox, textarea, stepper, segmented control, slider, progress or select. A font-icon name should be passed.

You can build your custom icon set on our download page ("Choose Icon Set" section).

See the full list of available icons here.

The default icon pack contains the following icons:
  • home
  • pencil
  • office
  • newspaper
  • droplet
  • image2
  • camera
  • play
  • bullhorn
  • connection
  • library
  • book
  • file4
  • copy2
  • copy3
  • stack
  • folder
  • tag
  • cart
  • support
  • phone
  • location
  • credit
  • map
  • history
  • clock
  • alarm2
  • stopwatch
  • calendar
  • mobile
  • drawer
  • undo2
  • redo2
  • forward
  • reply
  • bubble
  • bubbles
  • disk
  • download
  • upload
  • user4
  • key2
  • lock2
  • unlocked
  • cogs
  • aid
  • bars
  • cloud-download
  • cloud-upload
  • globe
  • airplane
  • earth
  • link
  • flag
  • eye
  • eye-blocked
  • attachment
  • star3
  • heart
  • thumbs-up
  • thumbs-up2
  • smiley2
  • sad2
  • checkmark
  • close
  • plus
  • minus
  • remove
  • loop2
You can use the icons anywhere in your app using the mbsc-ic mbsc-ic-{iconName} classes, e.g.:
<div class="mbsc-ic mbsc-ic-star"></div>
data-live If an input has the data-live="true" attribute, the value will be updated while the slider handle is moved. If data-live="false", the value will be updated when the handle is released.
data-step-labels Values to display under the slider track. Should be passed as an array, e.g. data-step-labels="[0, 25, 50, 75, 100]".
data-target Specify a target element, where the slider value will be displayed. The string should be a CSS selector, e.g. #slider_value
data-template Template for the slider value. '{value}' stands for the slider current value, and '{max}' stands for the slider maximum value. Any other character in the template will be handled as literal string.
data-tooltip If true, a tooltip with the current value will be displayed above the slider handle while moving.
data-val Specify the value position. It can be "left" or "right", it defaults to "left" if not specified.
disabled If an element has the disabled attribute, the element will be disabled.
max Specify the maximum value that can be selected.
min Specify the minimum value that can be selected.
step Specify the step between values.
value Specify the initial value of the slider.

Methods

Name Description
getVal() Returns the slider value.

Returns: Number

  • The slider value.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.getVal();
setVal(value) Sets the slider value.

Parameters

  • value: Number - The slider value.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.setVal(50);

Progress

The progress control can be used to display the completion progress of a task

Simple progress with label
<label>
    Loading
    <progress value="30" max="100"></progress>
</label>
With icon
<label>
    <progress value="50" max="100" data-icon="plus" data-icon-align="right"></progress>
</label>
With icons on both sides
<label>
    Loading
    <progress max="100" value="0" data-icon='{ "right": "plus", "left": "minus" }'></progress>
</label>
With value on the left
<label>
    Loading
    <progress max="1000" value="130" data-val="left" ></progress>
</label>
With value on the right
<label>
    Loading
    <progress max="100" value="50" data-icon='{ "left": "plus" }' data-val="right" ></progress>
</label>
With step labels
<label>
    Progress with labels
    <progress max="200" value="50" data-val="right" data-step-labels="[0, 25, 50, 75, 100, 125, 150, 175, 200]"></progress>
</label>

Attributes

Name Description
data-enhance If a form element has the data-enhance="false" attribute, the particular element won't be enhanced.
data-icon Specify icons for a button, textbox, textarea, stepper, segmented control, slider, progress or select. A font-icon name should be passed.

Icon alignment can be controlled with the data-icon-align attribute. Icons can be displayed on both sides by passing and object with left and right properties containing icon names, e.g.: data-icon='{ "right": "plus", "left": "minus" }'.
You can build your custom icon set on our download page ("Choose Icon Set" section).

See the full list of available icons here.

The default icon pack contains the following icons:
  • home
  • pencil
  • office
  • newspaper
  • droplet
  • image2
  • camera
  • play
  • bullhorn
  • connection
  • library
  • book
  • file4
  • copy2
  • copy3
  • stack
  • folder
  • tag
  • cart
  • support
  • phone
  • location
  • credit
  • map
  • history
  • clock
  • alarm2
  • stopwatch
  • calendar
  • mobile
  • drawer
  • undo2
  • redo2
  • forward
  • reply
  • bubble
  • bubbles
  • disk
  • download
  • upload
  • user4
  • key2
  • lock2
  • unlocked
  • cogs
  • aid
  • bars
  • cloud-download
  • cloud-upload
  • globe
  • airplane
  • earth
  • link
  • flag
  • eye
  • eye-blocked
  • attachment
  • star3
  • heart
  • thumbs-up
  • thumbs-up2
  • smiley2
  • sad2
  • checkmark
  • close
  • plus
  • minus
  • remove
  • loop2
You can use the icons anywhere in your app using the mbsc-ic mbsc-ic-{iconName} classes, e.g.:
<div class="mbsc-ic mbsc-ic-star"></div>
data-icon-align Specify icon alignment. It can be "left" or "right", it defaults to "left" if not specified.
data-val Specify the value position. It can be "left" or "right", it defaults to "left" if not specified.
disabled If an element has the disabled attribute, the element will be disabled.
max Specify the final value of the progress.
value Specify the initial value of the progress.

Methods

Name Description
getVal() Returns the progress value.

Returns: Number

  • The progress value.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.getVal();
setVal(value) Sets the progress value.

Parameters

  • value: Number - The progress value.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.setVal(50);

Segmented control

The segmented control is a horizontal control made of multiple segments, each segment functioning as a discrete button.
Inputs with type="radio" and data-role="segmented" will be transformed into a segmented control.
Just like radio buttons, the segments are grouped by the name attribute of the input.

With icon
<label>
    <input type="radio" data-role="segmented" data-icon="plus" name="group1" checked>
</label>
<label>
    <input type="radio" data-role="segmented" data-icon="minus" name="group1">
</label>
<label>
    <input type="radio" data-role="segmented" data-icon="key2" name="group1">
</label>
With text
<label>
    Option 1
    <input type="radio" data-role="segmented" name="group2" >
</label>
<label>
    Option 2
    <input type="radio" data-role="segmented" name="group2" checked >
</label>
<label>
    Option 3
    <input type="radio" data-role="segmented" name="group2">
</label>
<label>
    Option 4
    <input type="radio" data-role="segmented" name="group2" >
</label>
With icon and text
<label>
    Desktop
    <input type="radio" data-role="segmented" data-icon="home" name="group3" >
</label>
<label>
    Mobile
    <input type="radio" data-role="segmented" data-icon="mobile" name="group3">
</label>
<label>
    Cloud
    <input type="radio" data-role="segmented" data-icon="cloud-upload" name="group3" checked>
</label>

Attributes

Name Description
checked If an input element has the checked attribute, the element will be pre-selected (checked) when the page loads.
data-enhance If a form element has the data-enhance="false" attribute, the particular element won't be enhanced.
data-icon Specify icons for a button, textbox, textarea, stepper, segmented control, slider, progress or select. A font-icon name should be passed.

You can build your custom icon set on our download page ("Choose Icon Set" section).

See the full list of available icons here.

The default icon pack contains the following icons:
  • home
  • pencil
  • office
  • newspaper
  • droplet
  • image2
  • camera
  • play
  • bullhorn
  • connection
  • library
  • book
  • file4
  • copy2
  • copy3
  • stack
  • folder
  • tag
  • cart
  • support
  • phone
  • location
  • credit
  • map
  • history
  • clock
  • alarm2
  • stopwatch
  • calendar
  • mobile
  • drawer
  • undo2
  • redo2
  • forward
  • reply
  • bubble
  • bubbles
  • disk
  • download
  • upload
  • user4
  • key2
  • lock2
  • unlocked
  • cogs
  • aid
  • bars
  • cloud-download
  • cloud-upload
  • globe
  • airplane
  • earth
  • link
  • flag
  • eye
  • eye-blocked
  • attachment
  • star3
  • heart
  • thumbs-up
  • thumbs-up2
  • smiley2
  • sad2
  • checkmark
  • close
  • plus
  • minus
  • remove
  • loop2
You can use the icons anywhere in your app using the mbsc-ic mbsc-ic-{iconName} classes, e.g.:
<div class="mbsc-ic mbsc-ic-star"></div>
data-role If a radio input has the data-role="segmented" attribute, it will transformed into a segmented control.
disabled If an element has the disabled attribute, the element will be disabled.

Stepper

The stepper control lets the user adjust a value by increasing and decreasing it in small steps. Steppers are used in situations where a user needs to adjust a value by a small amount.

Inputs with data-role="stepper" will be transformed into a stepper control.

Simple stepper
<div>
    <label for="stepper-id">Label</label>
    <input id="stepper-id" data-role="stepper" >
</div>
Side value
<div>
    <label for="stepper-id">Label</label>  
    <input id="stepper-id" data-role="stepper" data-val="right">
</div>
With min, max and step
<div>
    <input data-role="stepper" value="-0.25" min="-10" max="10" step="0.25">
</div>

Attributes

Name Description
data-enhance If a form element has the data-enhance="false" attribute, the particular element won't be enhanced.
data-role If an input has the data-role="stepper" attribute, it will transformed into a stepper.
data-val Specify the value position. It can be "left" or "right", it defaults to "left" if not specified.
disabled If an element has the disabled attribute, the element will be disabled.
max Specify the maximum value that can be selected.
min Specify the minimum value that can be selected.
step Specify the step between values.
value Specify the initial value of the stepper.

Groups

For styling the groups inside the form element you can use the mbsc-form-group, mbsc-form-group-title and mbsc-form-group-inset classes.

Form group
<div class="mbsc-form-group">
	<div class="mbsc-form-group-title">Phone</div>
	<label>
		Home
		<input type="tel" class="md-phone" placeholder="Phone" name="phone" value="+12225550127">
	</label>
	<label>
		Work
		<input type="tel" class="md-phone" placeholder="Phone" name="phone" value="+12225550128">
	</label>
</div>
Form group inset
<div class="mbsc-form-group-inset">
	<label>
		<input id="email" type="email" name="Email" placeholder="Email" />
	</label>
	<label>
		<input name="password" type="text" placeholder="Password" data-password-toggle="true" data-icon="none" data-icon-align="right" />
	</label>
</div>	

Validation

The Mobiscroll Forms component does not have built in validation mechanism, but provides error state stylings. Use the mbsc-err css class on the form element's container and the mbsc-err-msg css class on the error message:

<label class="mbsc-err">
    Username
    <input id="username" />
    <span class="mbsc-err-msg">Username is required.</span>
</label>
    

Sample validation using the jQuery Validation plugin:

HTML
<form id="myform">
    <label>
        Username
        <input id="username" required />
    </label>
    <label>
        Password
        <input id="password" type="password" required />
    </label>
    <button type="submit">Sign In</button>
</form>
Javascript
$('#myform').mobiscroll().form().validate({
    errorClass: 'mbsc-err-msg',
    errorPlacement: function (error, element) {
        element.parent().append(error);
    },
    highlight: function (element) {
        $(element).closest('.mbsc-control-w').addClass("mbsc-err");
    },
    unhighlight: function (element) {
        $(element).closest('.mbsc-control-w').removeClass("mbsc-err");
    }
});
Preorder available for Ember JS
What you'll get:
- Exclusive Early Beta Access
- Show your interest in the product. Based on the preorders we'll set the development and shipping priorities
- Get access to the full Framework until we ship
- Support and Maintenance is on us until we release the Mobiscroll for Ember
- We believe in delivering great products so if for any reason you are not satisfied, you'll get a full refund