General Calendar Cards Color Date & Time Event Calendar Forms Grid Layout Image Listview Measurement Navigation Number Numpad Option List Page Popup Range Scroller Scrollview Select Timer Timespan Treelist Tools Accessibility

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.

Starting from 4.8.0 the form elements can be used separately using their own attributes to initialize.

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 mbsc-input id="username" />
    </label>
    <label>
        Password
        <input mbsc-input id="password" type="password" />
    </label>
    <button mbsc-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).

$.get('/myform', function (responseHtml) {
    $('#page').html(responseHtml).trigger('mbsc-enhance');
});

When elements are dynamically added to an already initialized form, trigger the mbsc-refresh event to initialize the new elements.

$('#myform').trigger('mbsc-refresh');

Using Mobiscroll Form elements on jQuery Mobile pages

The Mobiscroll form elements can only be used on a jQuery Mobile pages if the JQM auto enhancing is turned off. To prevent jQuery Mobile from enhancing an entire block of content add data-enhance="false" to the parent container and nothing within the container will be enhanced. To use data-enhance="false" you must also set $.mobile.ignoreContentEnabled to true prior to initialization. Make sure to set the $.mobile.ignoreContentEnabled to true before the jQuery Mobile script is loaded in the mobileinit event.

Set $.mobile.ignoreContentEnabled to true
<script>
    $(document).on("mobileinit", function () { $.mobile.ignoreContentEnabled = true; });
</script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

Manual Initialization

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

HTML
<div id="myform">
    <label>
        Username
        <input mbsc-input id="username" />
    </label>
    <label>
        Password
        <input mbsc-input id="password" type="password" />
    </label>
    <button mbsc-button type="submit">Sign In</button>
</div>
Javascript
$(function () {
    $('#myform').mobiscroll().form({
        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.

$.get('/myform', function (responseHtml) {
    $('#page').html(responseHtml);
    $('#myform').mobiscroll().form({
        theme: 'material'
    });
});

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

$('#myform').mobiscroll('refresh');

Typescript Types

When using with typescript, the following types are available for the Form:

Type Description
Form Type of the Form instance
MbscFormOptions Type of the settings object that is used to initialize the component

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.
enhance Boolean true If true, the form elements will be enhanced.
inputStyle String 'underline' Defines the input rendering mode. By default the input has the underline styling. Possible values:
  • 'underline'
  • 'box'
  • 'outline'
labelStyle String undefined Defines the position of the label. The default label style depends on the theme option. With the 'ios' theme the inputs have inline labels, with 'mobiscroll', 'material' and 'windows' themes the default label position is stacked. Possible values:
  • 'stacked'
  • 'inline'
  • 'floating'
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:
  • 'ios' - iOS theme
  • 'ios-dark' - iOS dark theme (deprecated)
  • 'material' - Material theme
  • 'material-dark' - Material dark theme (deprecated)
  • 'mobiscroll' - Mobiscroll theme
  • 'mobiscroll-dark' - Mobiscroll dark theme (deprecated)
  • 'windows' - Windows theme
  • 'windows-dark' - Windows dark theme (deprecated)
It's possible to modify theme colors or create custom themes.
Starting from v4.9.0 setting directly the dark version of the theme is deprecated. Use the themeVariant setting instead to control the light / dark appearance of the theme.
Make sure that the theme you set is included in the downloaded package.
themeVariant String undefined Controls which variant of the theme will be used (light or dark).

Possible values:
  • 'light' - Use the light variant of the theme.
  • 'dark' - Use the dark variant of the theme.
  • 'auto' - Detect the preferred system theme on devices where this is supported.

If not set, only the theme setting will determine which theme to use.

To use the setting with custom themes, make sure to create two custom themes, where the dark version has the same name as the light one, suffixed with '-dark', e.g.: 'my-theme' and 'my-theme-dark'.
The setting will not have any effect if the theme setting explicitly sets the dark version of a theme, e.g. theme: 'ios-dark'.

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').mobiscroll().forms({
    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
// With selector
$('#mobiscroll').mobiscroll('getInst');

// With instance
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
// With selector
$('#mobiscroll').mobiscroll('option', {
    display: 'bottom',
    lang: 'de'
});

// With instancee
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
// With selector
$('#mobiscroll').mobiscroll('refresh');

// With instance
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
// With selector
$('#mobiscroll').mobiscroll('tap', $('#element'), function () { alert("It's a tap!"); });

// With instance
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:
  • Arabic: 'ar'
  • Bulgarian: 'bg'
  • Catalan: 'ca'
  • Czech: 'cs'
  • Chinese: 'zh'
  • Croatian: 'hr'
  • Danish: 'da'
  • Dutch: 'nl'
  • English: 'en' or 'en-US' or undefined
  • English (UK): 'en-UK' or 'en-GB'
  • Farsi: 'fa'
  • German: 'de'
  • Greek: 'el'
  • Spanish: 'es'
  • Finnish: 'fi'
  • French: 'fr'
  • Hebrew: 'he'
  • Hindi: 'hi'
  • Croatian: 'hr'
  • Hungarian: 'hu'
  • Italian: 'it'
  • Japanese: 'ja'
  • Korean: 'ko'
  • Lithuanian: 'lt'
  • Norwegian: 'no'
  • Polish: 'pl'
  • Portuguese (Brazilian): 'pt-BR'
  • Portuguese (European): 'pt-PT'
  • Romanian: 'ro'
  • Russian: 'ru'
  • Russian (UA): 'ru-UA'
  • Slovak: 'sk'
  • Serbian: 'sr'
  • Thai: 'th'
  • Swedish: 'sv'
  • Turkish: 'tr'
  • Ukrainian: 'ua'
  • Vietnamese: 'vi'
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.

Validation

Sample validation using the jQuery Validation plugin:

HTML
<form id="myform">
    <label>
        Username
        <input mbsc-input id="username" required />
    </label>
    <label>
        Password
        <input mbsc-input id="password" type="password" required />
    </label>
    <button mbsc-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");
    }
});

Customizing the appearance

While the provided pre-built themes are enough in many use cases, most of the times on top of adapting to a specific platform, you'd also like to match a brand or color scheme. Mobiscroll provides various ways to achieve this:

Override the Sass Color Variables

A convenient way to customize the colors of the Mobiscroll components is to override the Sass color variables.

Let's say your branding uses a nice red accent color, and you'd like that color to appear on the Mobiscroll components as well, while still using platform specific themes (e.g. ios on iOS devices, material on Android devices, and mobiscroll on desktop). You can override the accent color for every theme:

$mbsc-ios-accent: #e61d2a;
$mbsc-material-accent: #e61d2a;
$mbsc-mobiscroll-accent: #e61d2a;

@import "~@mobiscroll/JQuery/dist/css/mobiscroll.jquery.scss"
It's important that you override the variables BEFORE the scss file import, otherwise it won't make any difference.
Here's a complete guide on how to set up Mobiscroll with SASS support

You can also customize the colors on many levels:

  1. Theme specific variables (ex. $mbsc-material-background, $mbsc-ios-dark-text) are applied to all components in a theme. Complete list of variables here.
  2. Component specific global variables (ex. $mbsc-card-background-light, $mbsc-listview-text-dark) are applied to all themes for a specific component.
  3. Component and theme specific variables (ex. $mbsc-ios-dark-form-background, $mbsc-material-input-text) are applied to a specific theme and a specific component.

Hereinafter you will see all the variables that are specific to the Form component or affect its look:

Global variables

These variables are applied to all base themes: iOS, material, windows and mobiscroll.
They all come in pairs. One for the light and one for the dark variant in each theme.

Variable name Description
$mbsc-form-background-light Sets the background color of the form
$mbsc-form-background-dark
$mbsc-form-text-light Sets the text color of the form
$mbsc-form-text-dark
$mbsc-form-group-title-text-light Sets the text color of the form group title
$mbsc-form-group-title-text-dark
$mbsc-form-accent-light Sets the accent color of the form
$mbsc-form-accent-dark

Variables specific to individual form components can be found on the links below:

If you really want to get sophisticated or if a color doesn't look good on a specific theme and you want to overwrite it, you can fine tune all of the above variables individually for each theme. Below are the complete list of variables broken down to themes:

iOS theme

Variable name Default value Description
$mbsc-ios-form-background
#ffffff
The form background color
$mbsc-ios-form-text
#000000
The form text color
$mbsc-ios-form-group-title-text
#707070
The form group title text color
$mbsc-ios-form-accent
#1273de
The form accent color

iOS Dark theme

Variable name Default value Description
$mbsc-ios-dark-form-background
#0f0f0f
The form background color
$mbsc-ios-dark-form-text
#ffffff
The form text color
$mbsc-ios-dark-form-group-title-text
#8f8f8f
The form group title text color
$mbsc-ios-dark-form-accent
#de7a13
The form accent color

Windows theme

Variable name Default value Description
$mbsc-windows-form-background
#ffffff
The form background color
$mbsc-windows-form-text
#262626
The form text color
$mbsc-windows-form-group-title-text
#262626
The form group title text color
$mbsc-windows-form-accent
#0078d7
The form accent color

Windows Dark theme

Variable name Default value Description
$mbsc-windows-dark-form-background
#000000
The form background color
$mbsc-windows-dark-form-text
#ffffff
The form text color
$mbsc-windows-dark-form-group-title-text
#ffffff
The form group title text color
$mbsc-windows-dark-form-accent
#0078d7
The form accent color

Material theme

Variable name Default value Description
$mbsc-material-form-background
#eeeeee
The form background color
$mbsc-material-form-text
#6d6d6d
The form text color
$mbsc-material-form-group-title-text
#009688
The form group title text color
$mbsc-material-form-accent
#019687
The form accent color

Material Dark theme

Variable name Default value Description
$mbsc-material-dark-form-background
#303030
The form background color
$mbsc-material-dark-form-text
#d4d4d4
The form text color
$mbsc-material-dark-form-group-title-text
#81ccc4
The form group title text color
$mbsc-material-dark-form-accent
#81ccc4
The form accent color

Mobiscroll theme

Variable name Default value Description
$mbsc-mobiscroll-form-background
#f7f7f7
The form background color
$mbsc-mobiscroll-form-text
#454545
The form text color
$mbsc-mobiscroll-form-group-title-text
#4eccc4
The form group title text color
$mbsc-mobiscroll-form-accent
#4fccc5
The form accent color

Mobiscroll Dark theme

Variable name Default value Description
$mbsc-mobiscroll-dark-form-background
#263239
The form background color
$mbsc-mobiscroll-dark-form-text
#f7f7f7
The form text color
$mbsc-mobiscroll-dark-form-group-title-text
#4fccc4
The form group title text color
$mbsc-mobiscroll-dark-form-accent
#4fccc5
The form accent color

Textfields

Textbox

Wrapped in label element
<label>
    Username
    <input mbsc-input id="username" />
</label>
Wrapped in div element
<div>
    <label for="username">Username</label>
    <input mbsc-input id="username" />
</div>
Without label
<div>
    <input mbsc-input id="username" placeholder="Username" />
</div>

Icons

With left icon
<label>
    Email
    <input mbsc-input id="email" type="email" data-icon="ion-ios7-email" />
</label>
With right icon
<label>
    Email
    <input mbsc-input id="email" type="email" data-icon="ion-ios7-email" data-icon-align="right"/>
</label>

Input style

This attribute can be used for customizing your form input rendering.

Underline input style
<label>
    Username
    <input mbsc-input id="username" data-input-style="underline" />
</label>
Box input style
<label>
    Username
    <input mbsc-input id="username" data-input-style="box" />
</label>
Outline input style
<label>
    Username
    <input mbsc-input id="username" data-input-style="outline" />
</label>

Label style

With this attribute you can define the position of the label.

Stacked label style
<label>
    Username
    <input mbsc-input id="username" data-label-style="stacked" />
</label>
Inline label style
<label>
    Username
    <input mbsc-input id="username" data-label-style="inline" />
</label>
Floating label style
<label>
    Username
    <input mbsc-input id="username" data-label-style="floating" />
</label>

Password

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

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

File upload input

You can change the file type input icon with the data-icon-upload attribute.

File type input with icon
<label>
    Upload
    <input mbsc-input type="file" placeholder="Select file..." data-icon-upload="cloud-upload"/>
</label>

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 mbsc-textarea id="aboutme"></textarea>
</label>
Wrapped in div element
<div>
    <label for="aboutme">About me</label>
    <textarea mbsc-textarea id="aboutme"></textarea>
</div>
Without label
<div>
    <textarea mbsc-textarea id="aboutme" placeholder="About me"></textarea>
</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.

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-icon-upload Specify icon for file type input. It can be any valid icon name, it defaults to "upload" if not specified.
data-input-style Defines the input rendering mode. Possible values: "underline", "box", "outline".
data-label-style Defines the position of the label. Possible values: "stacked", "inline", "floating".
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.

Icons

With left icon
<label>
    About me
    <textarea mbsc-textarea id="aboutme" data-icon="line-note"></textarea>
</label>
With right icon
<label>
    About me
    <textarea mbsc-textarea id="aboutme" data-icon="line-note" data-icon-align="right"></textarea>
</label>

Input style

This attribute can be used for customizing your form input rendering.

Underline input style
<label>
    About me
    <textarea mbsc-textarea id="aboutme" data-input-style="underline"></textarea>
</label>
Box input style
<label>
    About me
    <textarea mbsc-textarea id="aboutme" data-input-style="box"></textarea>
</label>
Outline input style
<label>
    About me
    <textarea mbsc-textarea id="aboutme" data-input-style="outline"></textarea>
</label>

Label style

With this attribute you can define the position of the label.

Stacked label style
<label>
    About me
    <textarea mbsc-textarea id="aboutme" data-label-style="stacked"></textarea>
</label>
Inline label style
<label>
    About me
    <textarea mbsc-textarea id="aboutme" data-label-style="inline"></textarea>
</label>
Floating label style
<label>
    About me
    <textarea mbsc-textarea id="aboutme" data-label-style="floating"></textarea>
</label>

Textfields theming

Global variables of the Input, Password, Textarea and Dropdown

Variable name Description
$mbsc-input-background-light Sets the background color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-input-background-dark
$mbsc-input-text-light Sets the text color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-input-text-dark
$mbsc-form-input-border-light Sets the border color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-form-input-border-dark
$mbsc-input-accent-light Sets the accent color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-input-accent-dark
$mbsc-input-error-light Sets the error color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-input-error-dark

iOS theme

The following variables are specific to the iOS theme light variant:

Variable name Default value Description
$mbsc-ios-input-background
#ffffff
Sets the background color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-ios-input-text
#000000
Sets the text color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-ios-input-border
#cccccc
Sets the border color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-ios-input-error
#d8332a
Sets the error color of the Input, along with the Password, Textarea and Dropdown fields.

iOS Dark theme

The following variables are specific to the iOS theme dark variant:

Variable name Default value Description
$mbsc-ios-dark-input-background
#0f0f0f
Sets the background color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-ios-dark-input-text
#ffffff
Sets the text color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-ios-dark-input-border
#333333
Sets the border color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-ios-dark-input-error
#d8332a
Sets the error color of the Input, along with the Password, Textarea and Dropdown fields.

Underline examples

Box examples

Outline examples

Windows theme

The following variables are specific to the Windows theme light variant:

Variable name Default value Description
$mbsc-windows-input-text
#262626
Sets the text color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-windows-input-border
#999999
Sets the border color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-windows-input-accent
#0078d7
Sets the accent color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-windows-input-error
#d30101
Sets the error color of the Input, along with the Password, Textarea and Dropdown fields.

Windows Dark theme

The following variables are specific to the Windows theme dark variant:

Variable name Default value Description
$mbsc-windows-dark-input-text
#ffffff
Sets the text color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-windows-dark-input-border
#737373
Sets the border color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-windows-dark-input-accent
#0078d7
Sets the accent color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-windows-dark-input-error
#d30101
Sets the error color of the Input, along with the Password, Textarea and Dropdown fields.

Underline examples

Box examples

Outline examples

Material theme

The following variables are specific to the Material theme light variant:

Variable name Default value Description
$mbsc-material-input-background
#eeeeee
Sets the background color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-material-input-text
#6d6d6d
Sets the text color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-material-input-border
#6d6d6d
Sets the border color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-material-input-accent
#009688
Sets the accent color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-material-input-error
#de3226
Sets the error color of the Input, along with the Password, Textarea and Dropdown fields.

Material Dark theme

The following variables are specific to the Material theme dark variant:

Variable name Default value Description
$mbsc-material-dark-input-background
#303030
Sets the background color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-material-dark-input-text
#d4d4d4
Sets the text color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-material-dark-input-border
#d4d4d4
Sets the border color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-material-dark-input-accent
#81ccc4
Sets the accent color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-material-dark-input-error
#de3226
Sets the error color of the Input, along with the Password, Textarea and Dropdown fields.

Underline examples

Box examples

Outline examples

Mobiscroll theme

The following variables are specific to the Mobiscroll theme light variant:

Variable name Default value Description
$mbsc-mobiscroll-input-text
#454545
Sets the text color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-mobiscroll-input-border
#787878
Sets the border color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-mobiscroll-input-accent
#4eccc4
Sets the accent color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-mobiscroll-input-error
#de3226
Sets the error color of the Input, along with the Password, Textarea and Dropdown fields.

Mobiscroll Dark theme

The following variables are specific to the Mobiscroll theme dark variant:

Variable name Default value Description
$mbsc-mobiscroll-dark-input-text
#f7f7f7
Sets the text color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-mobiscroll-dark-input-border
#ffffff
Sets the border color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-mobiscroll-dark-input-accent
#4fccc4
Sets the accent color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-mobiscroll-dark-input-error
#de3226
Sets the error color of the Input, along with the Password, Textarea and Dropdown fields.

Underline examples

Box examples

Outline examples

If you are looking for the generic Form variables, check out the tables here.

Select

Wrapped in label element
<label>
    Choose one
    <select mbsc-dropdown 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 mbsc-dropdown id="choose">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
</div>
Without label
<div>
    <select mbsc-dropdown id="choose">
        <option value="">Choose one</option>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
</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.

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-input-style Defines the input rendering mode. Possible values: "underline", "box", "outline".
data-label-style Defines the position of the label. Possible values: "stacked", "inline", "floating".
disabled If an element has the disabled attribute, the element will be disabled.

Icons

With left icon
<label>
    Choose one
    <select mbsc-dropdown 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 mbsc-dropdown id="choose" data-icon="line-note" data-icon-align="right">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
</label>

Input style

This attribute can be used for customizing your form input rendering.

Underline input style
<label>
    Choose one
    <select mbsc-dropdown id="choose" data-input-style="underline">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
</label>
Box input style
<label>
    Choose one
    <select mbsc-dropdown id="choose" data-input-style="box">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
</label>
Outline input style
<label>
    Choose one
    <select mbsc-dropdown id="choose" data-input-style="outline">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
</label>

Label style

With this attribute you can define the position of the label.

Stacked label style
<label>
    Choose one
    <select mbsc-dropdown id="choose" data-label-style="stacked">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
</label>
Inline label style
<label>
    Choose one
    <select mbsc-dropdown id="choose" data-label-style="inline">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
</label>
Floating label style
<label>
    Choose one
    <select mbsc-dropdown id="choose" data-label-style="floating">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
</label>
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.
$('#myselect').val(4).trigger('change.mbsc-form');

Dropdown theming

Global variables of the Dropdown, Input, Password and Textarea

Variable name Description
$mbsc-input-background-light Sets the background color of the Dropdown, along with the Input, Password and Textarea fields.
$mbsc-input-background-dark
$mbsc-input-text-light Sets the text color of the Dropdown, along with the Input, Password and Textarea fields.
$mbsc-input-text-dark
$mbsc-form-input-border-light Sets the border color of the Dropdown, along with the Input, Password and Textarea fields.
$mbsc-form-input-border-dark
$mbsc-input-accent-light Sets the accent color of the Dropdown, along with the Input, Password and Textarea fields.
$mbsc-input-accent-dark
$mbsc-input-error-light Sets the error color of the Dropdown, along with the Input, Password and Textarea fields.
$mbsc-input-error-dark

iOS theme

The following variables are specific to the iOS theme light variant:

Variable name Default value Description
$mbsc-ios-input-background
#ffffff
Sets the background color of the Dropdown, along with the Input, Password and Textarea fields.
$mbsc-ios-input-text
#000000
Sets the text color of the Dropdown, along with the Input, Password and Textarea fields.
$mbsc-ios-input-border
#cccccc
Sets the border color of the Dropdown, along with the Input, Password and Textarea fields.
$mbsc-ios-input-error
#d8332a
Sets the error color of the Dropdown, along with the Input, Password and Textarea fields.

iOS Dark theme

The following variables are specific to the iOS theme dark variant:

Variable name Default value Description
$mbsc-ios-dark-input-background
#0f0f0f
Sets the background color of the Dropdown, along with the Input, Password and Textarea fields.
$mbsc-ios-dark-input-text
#ffffff
Sets the text color of the Dropdown, along with the Input, Password and Textarea fields.
$mbsc-ios-dark-input-border
#333333
Sets the border color of the Dropdown, along with the Input, Password and Textarea fields.
$mbsc-ios-dark-input-error
#d8332a
Sets the error color of the Dropdown, along with the Input, Password and Textarea fields.

Underline examples

Box examples

Outline examples

Windows theme

The following variables are specific to the Windows theme light variant:

Variable name Default value Description
$mbsc-windows-input-text
#262626
Sets the text color of the Dropdown, along with the Input, Password and Textarea fields.
$mbsc-windows-input-border
#999999
Sets the border color of the Dropdown, along with the Input, Password and Textarea fields.
$mbsc-windows-input-accent
#0078d7
Sets the accent color of the Dropdown, along with the Input, Password and Textarea fields.
$mbsc-windows-input-error
#d30101
Sets the error color of the Dropdown, along with the Input, Password and Textarea fields.

Windows Dark theme

The following variables are specific to the Windows theme dark variant:

Variable name Default value Description
$mbsc-windows-dark-input-text
#ffffff
Sets the text color of the Dropdown, along with the Input, Password and Textarea fields.
$mbsc-windows-dark-input-border
#737373
Sets the border color of the Dropdown, along with the Input, Password and Textarea fields.
$mbsc-windows-dark-input-accent
#0078d7
Sets the accent color of the Dropdown, along with the Input, Password and Textarea fields.
$mbsc-windows-dark-input-error
#d30101
Sets the error color of the Dropdown, along with the Input, Password and Textarea fields.

Underline examples

Box examples

Outline examples

Material theme

The following variables are specific to the Material theme light variant:

Variable name Default value Description
$mbsc-material-input-background
#eeeeee
Sets the background color of the Dropdown, along with the Input, Password and Textarea fields.
$mbsc-material-input-text
#6d6d6d
Sets the text color of the Dropdown, along with the Input, Password and Textarea fields.
$mbsc-material-input-border
#6d6d6d
Sets the border color of the Dropdown, along with the Input, Password and Textarea fields.
$mbsc-material-input-accent
#009688
Sets the accent color of the Dropdown, along with the Input, Password and Textarea fields.
$mbsc-material-input-error
#de3226
Sets the error color of the Dropdown, along with the Input, Password and Textarea fields.

Material Dark theme

The following variables are specific to the Material theme dark variant:

Variable name Default value Description
$mbsc-material-dark-input-background
#303030
Sets the background color of the Dropdown, along with the Input, Password and Textarea fields.
$mbsc-material-dark-input-text
#d4d4d4
Sets the text color of the Dropdown, along with the Input, Password and Textarea fields.
$mbsc-material-dark-input-border
#d4d4d4
Sets the border color of the Dropdown, along with the Input, Password and Textarea fields.
$mbsc-material-dark-input-accent
#81ccc4
Sets the accent color of the Dropdown, along with the Input, Password and Textarea fields.
$mbsc-material-dark-input-error
#de3226
Sets the error color of the Dropdown, along with the Input, Password and Textarea fields.

Underline examples

Box examples

Outline examples

Mobiscroll theme

The following variables are specific to the Mobiscroll theme light variant:

Variable name Default value Description
$mbsc-mobiscroll-input-text
#454545
Sets the text color of the Dropdown, along with the Input, Password and Textarea fields.
$mbsc-mobiscroll-input-border
#787878
Sets the border color of the Dropdown, along with the Input, Password and Textarea fields.
$mbsc-mobiscroll-input-accent
#4eccc4
Sets the accent color of the Dropdown, along with the Input, Password and Textarea fields.
$mbsc-mobiscroll-input-error
#de3226
Sets the error color of the Dropdown, along with the Input, Password and Textarea fields.

Mobiscroll Dark theme

The following variables are specific to the Mobiscroll theme dark variant:

Variable name Default value Description
$mbsc-mobiscroll-dark-input-text
#f7f7f7
Sets the text color of the Dropdown, along with the Input, Password and Textarea fields.
$mbsc-mobiscroll-dark-input-border
#ffffff
Sets the border color of the Dropdown, along with the Input, Password and Textarea fields.
$mbsc-mobiscroll-dark-input-accent
#4fccc4
Sets the accent color of the Dropdown, along with the Input, Password and Textarea fields.
$mbsc-mobiscroll-dark-input-error
#de3226
Sets the error color of the Dropdown, along with the Input, Password and Textarea fields.

Underline examples

Box examples

Outline examples

If you are looking for the generic Form variables, check out the tables here.

Checkbox

Wrapped in label element
<label>
    I agree
    <input mbsc-checkbox id="agree" type="checkbox" />
</label>
Wrapped in div element
<div>
    <label for="agree">I agree</label>
    <input mbsc-checkbox id="agree" type="checkbox" />
</div>
With description
<label>
    I agree
    <span class="mbsc-desc">Sample description</span>
    <input mbsc-checkbox id="agree" type="checkbox" />
</label>
Mobiscroll includes several predefined color presets, each serving its own semantic purpose
<label class="mbsc-checkbox-primary">
    Primary 
    <input mbsc-checkbox type="checkbox" checked>
</label>
<label class="mbsc-checkbox-secondary">
    Secondary
    <input mbsc-checkbox type="checkbox" checked>
</label>
<label class="mbsc-checkbox-success">
    Success
    <input mbsc-checkbox type="checkbox" checked>
</label>
<label class="mbsc-checkbox-danger">
    Danger
    <input mbsc-checkbox type="checkbox" checked>
</label>
<label class="mbsc-checkbox-warning">
    Warning
    <input mbsc-checkbox type="checkbox" checked>
</label>
<label class="mbsc-checkbox-info">
    Info
    <input mbsc-checkbox type="checkbox" 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.
disabled If an element has the disabled attribute, the element will be disabled.

Checkbox theming

Global variables of the Checkbox

Below you will find a list of SASS variables that affect the Checkbox:

Variable name Description
$mbsc-form-background-light Affects the background color of the Checkbox along with the Switch, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups
$mbsc-form-background-dark
$mbsc-form-text-light Affects the label and in some themes the box color of the Checkbox.
It also affects other components: Switch, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups
$mbsc-form-text-dark
$mbsc-form-accent-light Affects the checked color of the Checkboxes box) along with the Switch, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups controls.
$mbsc-form-accent-dark

If you really want to get sophisticated or if a color doesn't look good on a specific theme and you want to overwrite it, you can fine tune all of the above variables individually for each theme. Below are the complete list of variables broken down to themes:

iOS theme

The following variables are specific to the iOS theme light variant:

Variable name Default value Description
$mbsc-ios-form-background
#ffffff
Affects the background color of the Checkbox along with the Switch, Radio button, Button, Progress, Segmented, Stepper and Groups
$mbsc-ios-form-text
#000000
Affects the label color of the Checkbox. It also affects other components: Switch, Radio button, Button, Progress, Segmented, Stepper and Groups
$mbsc-ios-form-accent
#1273de
Affects the box color of the Checkbox along with the Switch, Radio button, Button, Progress, Segmented, Stepper and Groups controls.

iOS Dark theme

The following variables are specific to the iOS theme dark variant:

Variable name Default value Description
$mbsc-ios-dark-form-background
#0f0f0f
Affects the background color of the Checkbox along with the Switch, Radio button, Button, Progress, Segmented, Stepper and Groups
$mbsc-ios-dark-form-text
#ffffff
Affects the label color of the Checkbox. It also affects other components: Switch, Radio button, Button, Progress, Segmented, Stepper and Groups
$mbsc-ios-dark-form-accent
#de7a13
Affects the box color of the Checkbox along with the Switch, Radio button, Button, Progress, Segmented, Stepper and Groups controls.
iOS theme variables for the Checkbox component

Windows theme

The following variables are specific to the Windows theme light variant:

Variable name Default value Description
$mbsc-windows-form-background
#ffffff
Affects the background color of the Checkbox along with the Switch, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups
$mbsc-windows-form-text
#262626
Affects the label color of the Checkbox. It also affects other components: Switch, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups
$mbsc-windows-form-accent
#0078d7
Affects the checked color of the Checkboxes box along with the Switch, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups controls.

Windows Dark theme

The following variables are specific to the Windows theme dark variant:

Variable name Default value Description
$mbsc-windows-dark-form-background
#000000
Affects the background color of the Checkbox along with the Switch, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups
$mbsc-windows-dark-form-text
#ffffff
Affects the label color of the Checkbox. It also affects other components: Switch, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups
$mbsc-windows-dark-form-accent
#0078d7
Affects the checked color of the Checkboxes box along with the Switch, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups controls.
Windows theme variables for the Checkbox component

Material theme

The following variables are specific to the Material theme light variant:

Variable name Default value Description
$mbsc-material-form-background
#eeeeee
Affects the background color of the Checkbox along with the Switch, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups
$mbsc-material-form-text
#6d6d6d
Affects the label color of the Checkbox. It also affects other components: Switch, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups
$mbsc-material-form-accent
#019687
Affects the checked color of the Checkboxes box in activated state along with the Switch, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups controls.

Material Dark theme

The following variables are specific to the Material theme dark variant:

Variable name Default value Description
$mbsc-material-dark-form-background
#303030
Affects the background color of the Checkbox along with the Switch, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups
$mbsc-material-dark-form-text
#d4d4d4
Affects the label color of the Checkbox. It also affects other components: Switch, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups
$mbsc-material-dark-form-accent
#81ccc4
Affects the checked color of the Checkboxes box in activated state along with the Switch, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups controls.
Material theme variables for the Checkbox component

Mobiscroll theme

The following variables are specific to the Mobiscroll theme light variant:

Variable name Default value Description
$mbsc-mobiscroll-form-background
#f7f7f7
Affects the background color of the Checkbox along with the Switch, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups
$mbsc-mobiscroll-form-text
#454545
Affects the label color of the Checkbox. It also affects other components: Switch, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups
$mbsc-mobiscroll-form-accent
#4fccc5
Affects the checked color of the Checkboxes box along with the Switch, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups controls.

Mobiscroll Dark theme

The following variables are specific to the Mobiscroll theme dark variant:

Variable name Default value Description
$mbsc-mobiscroll-dark-form-background
#263239
Affects the background color of the Checkbox along with the Switch, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups
$mbsc-mobiscroll-dark-form-text
#f7f7f7
Affects the label color of the Checkbox. It also affects other components: Switch, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups
$mbsc-mobiscroll-dark-form-accent
#4fccc5
Affects the checked color of the Checkboxes box along with the Switch, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups controls.

If you are looking for the generic Form variables and how they affect the form in general, check out the tables and pictures here.

Switch

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

Wrapped in label element
<label>
    I agree
    <input id="agree" type="checkbox" mbsc-switch/>
</label>
Wrapped in div element
<div>
    <label for="agree">I agree</label>
    <input id="agree" type="checkbox" mbsc-switch/>
</div>
With description
<label>
    I agree
    <span class="mbsc-desc">Sample description</span>
    <input id="agree" type="checkbox" mbsc-switch/>
</label>
Mobiscroll includes several predefined color presets, each serving its own semantic purpose
<label class="mbsc-switch-primary">
    Primary 
    <input type="checkbox" mbsc-switch checked>
</label>
<label class="mbsc-switch-secondary">
    Secondary
    <input type="checkbox" mbsc-switch checked>
</label>
<label class="mbsc-switch-success">
    Success
    <input type="checkbox" mbsc-switch checked>
</label>
<label class="mbsc-switch-danger">
    Danger
    <input type="checkbox" mbsc-switch checked>
</label>
<label class="mbsc-switch-warning">
    Warning
    <input type="checkbox" mbsc-switch checked>
</label>
<label class="mbsc-switch-info">
    Info
    <input type="checkbox" mbsc-switch checked>
</label>

Setting state programatically

There are two ways to set the state of the switch programatically:

1. Set the checked property of the checkbox and call the refresh method of the switch:

$('#switch').prop('checked', true).mobiscroll('refresh');

2. Call the setVal method of the switch:

$('#switch').mobiscroll('setVal', true);

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.
mbsc-switch If a checkbox input has the mbsc-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
// With selector
$('#mobiscroll').mobiscroll('getVal');

// With instance
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
// With selector
$('#mobiscroll').mobiscroll('setVal', false);

// With instance
mobiscrollInstance.setVal(false);

Switch theming

Global variables of the Switch

Below you will find a list of SASS variables that affect the Switch:

Variable name Description
$mbsc-form-background-light Affects the background color of the Switch along with the Checkbox, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups
$mbsc-form-background-dark
$mbsc-form-text-light Affects the label and in some themes the handle color of the Switch.
It also affects other components: Checkbox, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups
$mbsc-form-text-dark
$mbsc-form-accent-light Affects the color of the switch in activated state along with the Checkbox, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups controls.
$mbsc-form-accent-dark

If you really want to get sophisticated or if a color doesn't look good on a specific theme and you want to overwrite it, you can fine tune all of the above variables individually for each theme. Below are the complete list of variables broken down to themes:

iOS theme

The following variables are specific to the iOS theme light variant:

Variable name Default value Description
$mbsc-ios-form-background
#ffffff
Affects the background color of the Switch along with the Checkbox, Radio button, Button, Progress, Segmented, Stepper and Groups
$mbsc-ios-form-text
#000000
Affects the label color of the Switch. It also affects other components: Checkbox, Radio button, Button, Progress, Segmented, Stepper and Groups

iOS Dark theme

The following variables are specific to the iOS theme dark variant:

Variable name Default value Description
$mbsc-ios-dark-form-background
#0f0f0f
Affects the background color of the Switch along with the Checkbox, Radio button, Button, Progress, Segmented, Stepper and Groups
$mbsc-ios-dark-form-text
#ffffff
Affects the label color of the Switch. It also affects other components: Checkbox, Radio button, Button, Progress, Segmented, Stepper and Groups
iOS theme variables for the Switch component

Windows theme

The following variables are specific to the Windows theme light variant:

Variable name Default value Description
$mbsc-windows-form-background
#ffffff
Affects the background color of the Switch along with the Checkbox, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups
$mbsc-windows-form-text
#262626
Affects the label color of the Switch. It also affects other components: Checkbox, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups
$mbsc-windows-form-accent
#0078d7
Affects the color of the switch in activated state along with the Checkbox, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups controls.

Windows Dark theme

The following variables are specific to the Windows theme dark variant:

Variable name Default value Description
$mbsc-windows-dark-form-background
#000000
Affects the background color of the Switch along with the Checkbox, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups
$mbsc-windows-dark-form-text
#ffffff
Affects the label color of the Switch. It also affects other components: Checkbox, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups
$mbsc-windows-dark-form-accent
#0078d7
Affects the color of the switch in activated state along with the Checkbox, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups controls.
Windows theme variables for the Switch component

Material theme

The following variables are specific to the Material theme light variant:

Variable name Default value Description
$mbsc-material-form-background
#eeeeee
Affects the background color of the Switch along with the Checkbox, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups
$mbsc-material-form-text
#6d6d6d
Affects the label color of the Switch. It also affects other components: Checkbox, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups
$mbsc-material-form-accent
#019687
Affects the color of the switch in activated state along with the Checkbox, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups controls.

Material Dark theme

The following variables are specific to the Material theme dark variant:

Variable name Default value Description
$mbsc-material-dark-form-background
#303030
Affects the background color of the Switch along with the Checkbox, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups
$mbsc-material-dark-form-text
#d4d4d4
Affects the label color of the Switch. It also affects other components: Checkbox, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups
$mbsc-material-dark-form-accent
#81ccc4
Affects the color of the switch in activated state along with the Checkbox, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups controls.
Material theme variables for the Switch component

Mobiscroll theme

The following variables are specific to the Mobiscroll theme light variant:

Variable name Default value Description
$mbsc-mobiscroll-form-background
#f7f7f7
Affects the background color of the Switch along with the Checkbox, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups
$mbsc-mobiscroll-form-text
#454545
Affects the label color of the Switch. It also affects other components: Checkbox, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups
$mbsc-mobiscroll-form-accent
#4fccc5
Affects the color of the switch in activated state along with the Checkbox, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups controls.

Mobiscroll Dark theme

The following variables are specific to the Mobiscroll theme dark variant:

Variable name Default value Description
$mbsc-mobiscroll-dark-form-background
#263239
Affects the background color of the Switch along with the Checkbox, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups
$mbsc-mobiscroll-dark-form-text
#f7f7f7
Affects the label color of the Switch. It also affects other components: Checkbox, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups
$mbsc-mobiscroll-dark-form-accent
#4fccc5
Affects the color of the switch in activated state along with the Checkbox, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups controls.

If you are looking for the generic Form variables and how they affect the form in general, check out the tables and pictures here.

Radio Buttons

<label>
    <input mbsc-radio type="radio" name="group" />Radio Label 1
    <span class="mbsc-desc">This is description for radio 1</span>
</label>
<label>
    <input mbsc-radio type="radio" name="group" />Radio Label 2
    <span class="mbsc-desc">This is description for radio 2</span>
</label>
Mobiscroll includes several predefined color presets, each serving its own semantic purpose
<label class="mbsc-radio-primary">
    Primary 
    <input mbsc-radio type="radio" name="color" checked>
</label>
<label class="mbsc-radio-secondary">
    Secondary
    <input mbsc-radio type="radio" name="color">
</label>
<label class="mbsc-radio-success">
    Success
    <input mbsc-radio type="radio" name="color">
</label>
<label class="mbsc-radio-danger">
    Danger
    <input mbsc-radio type="radio" name="color">
</label>
<label class="mbsc-radio-warning">
    Warning
    <input mbsc-radio type="radio" name="color">
</label>
<label class="mbsc-radio-info">
    Info
    <input mbsc-radio type="radio" name="color">
</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.

Radio button theming

Global variables of the Radio button

Below you will find a list of SASS variables that affect the Radio button:

Variable name Description
$mbsc-form-background-light Affects the background color of the Radio button along with the Checkbox, Switch, Button, Slider, Progress, Segmented, Stepper, Rating and Groups
$mbsc-form-background-dark
$mbsc-form-text-light Affects the label color of the Radio button.
It also affects other components: Checkbox, Switch, Button, Slider, Progress, Segmented, Stepper, Rating and Groups
$mbsc-form-text-dark
$mbsc-form-accent-light Affects the accent color of the Radio button along with the Checkbox, Switch, Button, Slider, Progress, Segmented, Stepper, Rating and Groups controls.
$mbsc-form-accent-dark

If you really want to get sophisticated or if a color doesn't look good on a specific theme and you want to overwrite it, you can fine tune all of the above variables individually for each theme. Below are the complete list of variables broken down to themes:

iOS theme

The following variables are specific to the iOS theme light variant:

Variable name Default value Description
$mbsc-ios-form-background
#ffffff
Affects the background color of the Radio button along with the Checkbox, Switch, Button, Progress, Segmented, Stepper and Groups
$mbsc-ios-form-text
#000000
Affects the label color of the Radio button. It also affects other components: Checkbox, Switch, Button, Progress, Segmented, Stepper and Groups
$mbsc-ios-form-accent
#1273de
Affects the accent color of the Radio button along with the Checkbox, Switch, Button, Progress, Segmented, Stepper and Groups controls.

iOS Dark theme

The following variables are specific to the iOS theme dark variant:

Variable name Default value Description
$mbsc-ios-dark-form-background
#0f0f0f
Affects the background color of the Radio button along with the Checkbox, Switch, Button, Progress, Segmented, Stepper and Groups
$mbsc-ios-dark-form-text
#ffffff
Affects the label color of the Radio button. It also affects other components: Checkbox, Switch, Button, Progress, Segmented, Stepper and Groups
$mbsc-ios-dark-form-accent
#de7a13
Affects the accent color of the Radio button along with the Checkbox, Switch, Button, Progress, Segmented, Stepper and Groups controls.
iOS theme variables for the Radio button component

Windows theme

The following variables are specific to the Windows theme light variant:

Variable name Default value Description
$mbsc-windows-form-background
#ffffff
Affects the background color of the Radio button along with the Checkbox, Switch, Button, Slider, Progress, Segmented, Stepper, Rating and Groups
$mbsc-windows-form-text
#262626
Affects the label color of the Radio button. It also affects other components: Checkbox, Switch, Button, Slider, Progress, Segmented, Stepper, Rating and Groups
$mbsc-windows-form-accent
#0078d7
Affects the accent color of the Radio button along with the Checkbox, Switch, Button, Slider, Progress, Segmented, Stepper, Rating and Groups controls.

Windows Dark theme

The following variables are specific to the Windows theme dark variant:

Variable name Default value Description
$mbsc-windows-dark-form-background
#000000
Affects the background color of the Radio button along with the Checkbox, Switch, Button, Slider, Progress, Segmented, Stepper, Rating and Groups
$mbsc-windows-dark-form-text
#ffffff
Affects the label color of the Radio button. It also affects other components: Checkbox, Switch, Button, Slider, Progress, Segmented, Stepper, Rating and Groups
$mbsc-windows-dark-form-accent
#0078d7
Affects the accent color of the Radio button along with the Checkbox, Switch, Button, Slider, Progress, Segmented, Stepper, Rating and Groups controls.
Windows theme variables for the Radio button component

Material theme

The following variables are specific to the Material theme light variant:

Variable name Default value Description
$mbsc-material-form-background
#eeeeee
Affects the background color of the Radio button along with the Checkbox, Switch, Button, Slider, Progress, Segmented, Stepper, Rating and Groups
$mbsc-material-form-text
#6d6d6d
Affects the label color of the Radio button. It also affects other components: Checkbox, Switch, Button, Slider, Progress, Segmented, Stepper, Rating and Groups
$mbsc-material-form-accent
#019687
Affects the accent color of the Radio button along with the Checkbox, Switch, Button, Slider, Progress, Segmented, Stepper, Rating and Groups controls.

Material Dark theme

The following variables are specific to the Material theme dark variant:

Variable name Default value Description
$mbsc-material-dark-form-background
#303030
Affects the background color of the Radio button along with the Checkbox, Switch, Button, Slider, Progress, Segmented, Stepper, Rating and Groups
$mbsc-material-dark-form-text
#d4d4d4
Affects the label color of the Radio button. It also affects other components: Checkbox, Switch, Button, Slider, Progress, Segmented, Stepper, Rating and Groups
$mbsc-material-dark-form-accent
#81ccc4
Affects the accent color of the Radio button along with the Checkbox, Switch, Button, Slider, Progress, Segmented, Stepper, Rating and Groups controls.
Material theme variables for the Radio button component

Mobiscroll theme

The following variables are specific to the Mobiscroll theme light variant:

Variable name Default value Description
$mbsc-mobiscroll-form-background
#f7f7f7
Affects the background color of the Radio button along with the Checkbox, Switch, Button, Slider, Progress, Segmented, Stepper, Rating and Groups
$mbsc-mobiscroll-form-text
#454545
Affects the label color of the Radio button. It also affects other components: Checkbox, Switch, Button, Slider, Progress, Segmented, Stepper, Rating and Groups
$mbsc-mobiscroll-form-accent
#4fccc5
Affects the accent color of the Radio button along with the Checkbox, Switch, Button, Slider, Progress, Segmented, Stepper, Rating and Groups controls.

Mobiscroll Dark theme

The following variables are specific to the Mobiscroll theme dark variant:

Variable name Default value Description
$mbsc-mobiscroll-dark-form-background
#263239
Affects the background color of the Radio button along with the Checkbox, Switch, Button, Slider, Progress, Segmented, Stepper, Rating and Groups
$mbsc-mobiscroll-dark-form-text
#f7f7f7
Affects the label color of the Radio button. It also affects other components: Checkbox, Switch, Button, Slider, Progress, Segmented, Stepper, Rating and Groups
$mbsc-mobiscroll-dark-form-accent
#4fccc5
Affects the accent color of the Radio button along with the Checkbox, Switch, Button, Slider, Progress, Segmented, Stepper, Rating and Groups controls.

If you are looking for the generic Form variables and how they affect the form in general, check out the tables and pictures here.

Buttons

The buttons come in several shapes, sizes and colors. Use the click events for attaching myClicks to it and see the examples below for the various renderings.

Simple button
<button mbsc-button onClick="myClick()">Button</button>
With icon
<button mbsc-button data-icon="plus" onClick="myClick()">Text & Icon</button>
Icon button
<button mbsc-button data-icon="plus" onClick="myClick()"></button>
Flat button
<button mbsc-button class="mbsc-btn-flat" onClick="myClick()">Flat</button>
Flat button with icon
<button mbsc-button class="mbsc-btn-flat" data-icon="arrow-left5" onClick="myClick()">Flat & Icon</button>
Flat icon button
<button mbsc-button class="mbsc-btn-flat" data-icon="plus" onClick="myClick()"></button>
Outline button
<button mbsc-button class="mbsc-btn-outline" onClick="myClick()">Outline button</button>
    
Outline button with icon
<button mbsc-button class="mbsc-btn-outline" data-icon="arrow-left5" onClick="myClick()">Outline & Icon</button>
    
Outline button with icon
<button mbsc-button class="mbsc-btn-outline" data-icon="arrow-plus" onClick="myClick()">Outline Icon</button>
    
Full width button
<button mbsc-button class="mbsc-btn-block" onClick="myClick()">Full width Button</button>
Button group
<div class="mbsc-btn-group">
    <button mbsc-button onClick="myClick()">Button 1</button>
    <button mbsc-button onClick="myClick()">Button 2</button>
    <button mbsc-button onClick="myClick()">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 mbsc-button onClick="myClick()">Button 1</button>
    <button mbsc-button onClick="myClick()">Button 2</button>
    <button mbsc-button onClick="myClick()">Button 3</button>
</div>
Full width button group
<!-- Each button fills the whole width of the container. -->
<div class="mbsc-btn-group-block">
    <button mbsc-button onClick="myClick()">Button 1</button>
    <button mbsc-button onClick="myClick()">Button 2</button>
    <button mbsc-button onClick="myClick()">Button 3</button>
</div>
Mobiscroll includes several predefined button colors, each serving its own semantic purpose

    <!-- Predefined button styles -->
    <button mbsc-button class="mbsc-btn-primary" onClick="myClick()">primary button</button>
    <button mbsc-button class="mbsc-btn-secondary" onClick="myClick()">secondary button</button>
    <button mbsc-button class="mbsc-btn-success" data-icon="key2" onClick="myClick()">success button</button>
    <button mbsc-button class="mbsc-btn-danger" onClick="myClick()">danger button</button>
    <button mbsc-button class="mbsc-btn-warning" onClick="myClick()">warning button</button>
    <button mbsc-button class="mbsc-btn-info" onClick="myClick()">info button</button>
    <button mbsc-button class="mbsc-btn-light" onClick="myClick()">light button</button>
    <button mbsc-button class="mbsc-btn-dark" onClick="myClick()">dark button</button>

    <!-- Predefined flat button styles -->
    <button mbsc-button class="mbsc-btn-flat mbsc-btn-primary" onClick="myClick()">primary button</button>
    <button mbsc-button class="mbsc-btn-flat mbsc-btn-secondary" onClick="myClick()">secondary button</button>
    <button mbsc-button class="mbsc-btn-flat mbsc-btn-success" onClick="myClick()">success button</button>
    <button mbsc-button class="mbsc-btn-flat mbsc-btn-danger" onClick="myClick()">danger button</button>
    <button mbsc-button class="mbsc-btn-flat mbsc-btn-warning" onClick="myClick()">warning button</button>
    <button mbsc-button class="mbsc-btn-flat mbsc-btn-info" onClick="myClick()">info button</button>
    <button mbsc-button class="mbsc-btn-flat mbsc-btn-light" onClick="myClick()">light button</button>
    <button mbsc-button class="mbsc-btn-flat mbsc-btn-dark" onClick="myClick()">dark button</button>

    <!-- Predefined outline button styles -->
    <button mbsc-button class="mbsc-btn-outline mbsc-btn-primary" onClick="myClick()">primary button</button>
    <button mbsc-button class="mbsc-btn-outline mbsc-btn-secondary" onClick="myClick()">secondary button</button>
    <button mbsc-button class="mbsc-btn-outline mbsc-btn-success" onClick="myClick()">success button</button>
    <button mbsc-button class="mbsc-btn-outline mbsc-btn-danger" onClick="myClick()">danger button</button>
    <button mbsc-button class="mbsc-btn-outline mbsc-btn-warning" onClick="myClick()">warning button</button>
    <button mbsc-button class="mbsc-btn-outline mbsc-btn-info" onClick="myClick()">info button</button>
    <button mbsc-button class="mbsc-btn-outline mbsc-btn-light" onClick="myClick()">light button</button>
    <button mbsc-button class="mbsc-btn-outline mbsc-btn-dark" onClick="myClick()">dark button</button>

    

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.

Button Theming

Global variables of the Button

Variable name Description
$mbsc-button-background-light Sets the background color of the button
$mbsc-button-background-dark
$mbsc-button-text-light Sets the text color of the button
$mbsc-button-text-dark

iOS theme

Variable name Default value Description
$mbsc-ios-button-background
#ffffff
The button background color
$mbsc-ios-button-text
#007bff
The button text color

iOS Dark theme

Variable name Default value Description
$mbsc-ios-dark-button-background
#3b3b3b
The button background color
$mbsc-ios-dark-button-text
#FF8402
The button text color

Windwos theme

Variable name Default value Description
$mbsc-windows-button-background
#cccccc
The button background color
$mbsc-windows-button-text
#262626
The button text color

Windwos Dark theme

Variable name Default value Description
$mbsc-windows-dark-button-background
#404040
The button background color
$mbsc-windows-dark-button-text
#ffffff
The button text color

Material theme

Variable name Default value Description
$mbsc-material-button-background
#d7d7d7
The button background color
$mbsc-material-button-text
#000000
The button text color

Material Dark theme

Variable name Default value Description
$mbsc-material-dark-button-background
#5b5b5b
The button background color
$mbsc-material-dark-button-text
#ffffff
The button text color

Mobiscroll theme

Variable name Default value Description
$mbsc-mobiscroll-button-background
#4eccc4
The button background color
$mbsc-mobiscroll-button-text
#efefef
The button text color

Mobiscroll Dark theme

Variable name Default value Description
$mbsc-mobiscroll-dark-button-background
#4fccc4
The button background color
$mbsc-mobiscroll-dark-button-text
#263238
The button text color

If you are looking for the generic Form variables, check out the tables here.

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 mbsc-slider type="range"  />
</label>
Slider with tooltip
<label>
    <input mbsc-slider type="range" data-tooltip="true" />
</label>
With value and template
<label>
    Label 
    <input mbsc-slider type="range" data-val="left" data-template="{value}/{max}">
</label>
With steps and step labels
<label>
    Step labels 1
    <input mbsc-slider 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 mbsc-slider 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 mbsc-slider type="range" value="25" step="25">
    <input mbsc-slider type="range" value="75">
</label>
With four handles
<label>
    Multiple handles
    <input mbsc-slider type="range" value="5" data-tooltip="true">
    <input mbsc-slider type="range" value="15" data-tooltip="true">
    <input mbsc-slider type="range" value="55" data-tooltip="true">
    <input mbsc-slider type="range" value="75" data-tooltip="true">
</label>
Mobiscroll includes several predefined color presets, each serving its own semantic purpose
<label class="mbsc-progress-primary">
    Primary 
    <input mbsc-slider type="range" data-icon="plus" data-icon-align="right" min="-100" max="0" step="5" value="-80" data-tooltip="true">
</label>
<label class="mbsc-progress-secondary">
    Secondary
    <input mbsc-slider type="range" data-icon="plus" data-icon-align="right" min="-100" max="0" step="5" value="-80" data-tooltip="true">
</label>
<label class="mbsc-progress-success">
    Success
    <input mbsc-slider type="range" data-icon="plus" data-icon-align="right" min="-100" max="0" step="5" value="-80" data-tooltip="true">
</label>
<label class="mbsc-progress-danger">
    Danger
    <input mbsc-slider type="range" data-icon="plus" data-icon-align="right" min="-100" max="0" step="5" value="-80" data-tooltip="true">
</label>
<label class="mbsc-progress-warning">
    Warning
    <input mbsc-slider type="range" data-icon="plus" data-icon-align="right" min="-100" max="0" step="5" value="-80" data-tooltip="true">
</label>
<label class="mbsc-progress-info">
    Info
    <input mbsc-slider type="range" data-icon="plus" data-icon-align="right" min="-100" max="0" step="5" value="-80" 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
// With selector
$('#mobiscroll').mobiscroll('getVal');

// With instance
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
// With selector
$('#mobiscroll').mobiscroll('setVal', 50);

// With instance
mobiscrollInstance.setVal(50);

Slider theming

Global variables of the Slider

Below you will find a list of SASS variables that affect the Slider:

Variable name Description
$mbsc-form-background-light Affects the background color of the Slider along with the Checkbox, Switch, Radio button, Button, Progress, Segmented, Stepper, Rating and Groups
$mbsc-form-background-dark
$mbsc-form-text-light Affects the label color of the Slider.
It also affects other components: Checkbox, Switch, Radio button, Button, Progress, Segmented, Stepper, Rating and Groups
$mbsc-form-text-dark
$mbsc-form-accent-light Affects the accent color of the Slider along with the Checkbox, Switch, Radio button, Button, Progress, Segmented, Stepper, Rating and Groups controls.
$mbsc-form-accent-dark

If you really want to get sophisticated or if a color doesn't look good on a specific theme and you want to overwrite it, you can fine tune all of the above variables individually for each theme. Below are the complete list of variables broken down to themes:

Windows theme

The following variables are specific to the Windows theme light variant:

Variable name Default value Description
$mbsc-windows-form-background
#ffffff
Affects the background color of the Slider along with the Checkbox, Switch, Radio button, Button, Progress, Segmented, Stepper, Rating and Groups
$mbsc-windows-form-text
#262626
Affects the label color of the Slider. It also affects other components: Checkbox, Switch, Radio button, Button, Progress, Segmented, Stepper, Rating and Groups
$mbsc-windows-form-accent
#0078d7
Affects the accent color of the Slider along with the Checkbox, Switch, Radio button, Button, Progress, Segmented, Stepper, Rating and Groups controls.

Windows Dark theme

The following variables are specific to the Windows theme dark variant:

Variable name Default value Description
$mbsc-windows-dark-form-background
#000000
Affects the background color of the Slider along with the Checkbox, Switch, Radio button, Button, Progress, Segmented, Stepper, Rating and Groups
$mbsc-windows-dark-form-text
#ffffff
Affects the label color of the Slider. It also affects other components: Checkbox, Switch, Radio button, Button, Progress, Segmented, Stepper, Rating and Groups
$mbsc-windows-dark-form-accent
#0078d7
Affects the accent color of the Slider along with the Checkbox, Switch, Radio button, Button, Progress, Segmented, Stepper, Rating and Groups controls.
Windows theme variables for the Slider component

Material theme

The following variables are specific to the Material theme light variant:

Variable name Default value Description
$mbsc-material-form-background
#eeeeee
Affects the background color of the Slider along with the Checkbox, Switch, Radio button, Button, Progress, Segmented, Stepper, Rating and Groups
$mbsc-material-form-text
#6d6d6d
Affects the label color of the Slider. It also affects other components: Checkbox, Switch, Radio button, Button, Progress, Segmented, Stepper, Rating and Groups
$mbsc-material-form-accent
#019687
Affects the accent color of the Slider along with the Checkbox, Switch, Radio button, Button, Progress, Segmented, Stepper, Rating and Groups controls.

Material Dark theme

The following variables are specific to the Material theme dark variant:

Variable name Default value Description
$mbsc-material-dark-form-background
#303030
Affects the background color of the Slider along with the Checkbox, Switch, Radio button, Button, Progress, Segmented, Stepper, Rating and Groups
$mbsc-material-dark-form-text
#d4d4d4
Affects the label color of the Slider. It also affects other components: Checkbox, Switch, Radio button, Button, Progress, Segmented, Stepper, Rating and Groups
$mbsc-material-dark-form-accent
#81ccc4
Affects the accent color of the Slider along with the Checkbox, Switch, Radio button, Button, Progress, Segmented, Stepper, Rating and Groups controls.
Material theme variables for the Slider component

Mobiscroll theme

The following variables are specific to the Mobiscroll theme light variant:

Variable name Default value Description
$mbsc-mobiscroll-form-background
#f7f7f7
Affects the background color of the Slider along with the Checkbox, Switch, Radio button, Button, Progress, Segmented, Stepper, Rating and Groups
$mbsc-mobiscroll-form-text
#454545
Affects the label color of the Slider. It also affects other components: Checkbox, Switch, Radio button, Button, Progress, Segmented, Stepper, Rating and Groups
$mbsc-mobiscroll-form-accent
#4fccc5
Affects the accent color of the Slider along with the Checkbox, Switch, Radio button, Button, Progress, Segmented, Stepper, Rating and Groups controls.

Mobiscroll Dark theme

The following variables are specific to the Mobiscroll theme dark variant:

Variable name Default value Description
$mbsc-mobiscroll-dark-form-background
#263239
Affects the background color of the Slider along with the Checkbox, Switch, Radio button, Button, Progress, Segmented, Stepper, Rating and Groups
$mbsc-mobiscroll-dark-form-text
#f7f7f7
Affects the label color of the Slider. It also affects other components: Checkbox, Switch, Radio button, Button, Progress, Segmented, Stepper, Rating and Groups
$mbsc-mobiscroll-dark-form-accent
#4fccc5
Affects the accent color of the Slider along with the Checkbox, Switch, Radio button, Button, Progress, Segmented, Stepper, Rating and Groups controls.

If you are looking for the generic Form variables and how they affect the form in general, check out the tables and pictures here.

Progress

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

Simple progress with label
<label>
    Loading
    <progress mbsc-progress value="30" max="100"></progress>
</label>
With icon
<label>
    <progress mbsc-progress value="50" max="100" data-icon="plus" data-icon-align="right"></progress>
</label>
With icons on both sides
<label>
    Loading
    <progress mbsc-progress max="100" value="0" data-icon='{ "right": "plus", "left": "minus" }'></progress>
</label>
With value on the left
<label>
    Loading
    <progress mbsc-progress max="1000" value="130" data-val="left" ></progress>
</label>
With value on the right
<label>
    Loading
    <progress mbsc-progress max="100" value="50" data-icon='{ "left": "plus" }' data-val="right" ></progress>
</label>
With step labels
<label>
    Progress with labels
    <progress mbsc-progress max="200" value="50" data-val="right" data-step-labels="[0, 25, 50, 75, 100, 125, 150, 175, 200]"></progress>
</label>
Mobiscroll includes several predefined color presets, each serving its own semantic purpose
<label class="mbsc-progress-primary">
    Primary 
    <progress mbsc-progress  value="30" max="100"></progress>
</label>
<label class="mbsc-progress-secondary">
    Secondary
    <progress mbsc-progress  value="30" max="100"></progress>
</label>
<label class="mbsc-progress-success">
    Success
    <progress mbsc-progress  value="30" max="100"></progress>
</label>
<label class="mbsc-progress-danger">
    Danger
    <progress mbsc-progress  value="30" max="100"></progress>
</label>
<label class="mbsc-progress-warning">
    Warning
    <progress mbsc-progress  value="30" max="100"></progress>
</label>
<label class="mbsc-progress-info">
    Info
    <progress mbsc-progress  value="30" max="100"></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
// With selector
$('#mobiscroll').mobiscroll('getVal');

// With instance
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
// With selector
$('#mobiscroll').mobiscroll('setVal', 50));

// With instance
mobiscrollInstance.setVal(50);

Progress theming

Global variables of the Progress

Below you will find a list of SASS variables that affect the Progress:

Variable name Description
$mbsc-form-background-light Affects the background color of the Progress along with the Checkbox, Switch, Radio button, Button, Slider, Segmented, Stepper, Rating and Groups
$mbsc-form-background-dark
$mbsc-form-text-light Affects the label color of the Progress.
It also affects other components: Checkbox, Switch, Radio button, Button, Slider, Segmented, Stepper, Rating and Groups
$mbsc-form-text-dark
$mbsc-form-accent-light Affects the accent color of the Progress along with the Checkbox, Switch, Radio button, Button, Slider, Segmented, Stepper, Rating and Groups controls.
$mbsc-form-accent-dark

If you really want to get sophisticated or if a color doesn't look good on a specific theme and you want to overwrite it, you can fine tune all of the above variables individually for each theme. Below are the complete list of variables broken down to themes:

iOS theme

The following variables are specific to the iOS theme light variant:

Variable name Default value Description
$mbsc-ios-form-background
#ffffff
Affects the background color of the Progress along with the Checkbox, Switch, Radio button, Button, Segmented, Stepper and Groups
$mbsc-ios-form-text
#000000
Affects the label color of the Progress. It also affects other components: Checkbox, Switch, Radio button, Button, Segmented, Stepper and Groups
$mbsc-ios-form-accent
#1273de
Affects the accent color of the Progress along with the Checkbox, Switch, Radio button, Button, Segmented, Stepper and Groups controls.

iOS Dark theme

The following variables are specific to the iOS theme dark variant:

Variable name Default value Description
$mbsc-ios-dark-form-background
#0f0f0f
Affects the background color of the Progress along with the Checkbox, Switch, Radio button, Button, Segmented, Stepper and Groups
$mbsc-ios-dark-form-text
#ffffff
Affects the label color of the Progress. It also affects other components: Checkbox, Switch, Radio button, Button, Segmented, Stepper and Groups
$mbsc-ios-dark-form-accent
#de7a13
Affects the accent color of the Progress along with the Checkbox, Switch, Radio button, Button, Segmented, Stepper and Groups controls.
iOS theme variables for the Progress component

Windows theme

The following variables are specific to the Windows theme light variant:

Variable name Default value Description
$mbsc-windows-form-background
#ffffff
Affects the background color of the Progress along with the Checkbox, Switch, Radio button, Button, Slider, Segmented, Stepper, Rating and Groups
$mbsc-windows-form-text
#262626
Affects the label color of the Progress. It also affects other components: Checkbox, Switch, Radio button, Button, Slider, Segmented, Stepper, Rating and Groups
$mbsc-windows-form-accent
#0078d7
Affects the accent color of the Progress along with the Checkbox, Switch, Radio button, Button, Slider, Segmented, Stepper, Rating and Groups controls.

Windows Dark theme

The following variables are specific to the Windows theme dark variant:

Variable name Default value Description
$mbsc-windows-dark-form-background
#000000
Affects the background color of the Progress along with the Checkbox, Switch, Radio button, Button, Slider, Segmented, Stepper, Rating and Groups
$mbsc-windows-dark-form-text
#ffffff
Affects the label color of the Progress. It also affects other components: Checkbox, Switch, Radio button, Button, Slider, Segmented, Stepper, Rating and Groups
$mbsc-windows-dark-form-accent
#0078d7
Affects the accent color of the Progress along with the Checkbox, Switch, Radio button, Button, Slider, Segmented, Stepper, Rating and Groups controls.
Windows theme variables for the Progress component

Material theme

The following variables are specific to the Material theme light variant:

Variable name Default value Description
$mbsc-material-form-background
#eeeeee
Affects the background color of the Progress along with the Checkbox, Switch, Radio button, Button, Slider, Segmented, Stepper, Rating and Groups
$mbsc-material-form-text
#6d6d6d
Affects the label color of the Progress. It also affects other components: Checkbox, Switch, Radio button, Button, Slider, Segmented, Stepper, Rating and Groups
$mbsc-material-form-accent
#019687
Affects the accent color of the Progress along with the Checkbox, Switch, Radio button, Button, Slider, Segmented, Stepper, Rating and Groups controls.

Material Dark theme

The following variables are specific to the Material theme dark variant:

Variable name Default value Description
$mbsc-material-dark-form-background
#303030
Affects the background color of the Progress along with the Checkbox, Switch, Radio button, Button, Slider, Segmented, Stepper, Rating and Groups
$mbsc-material-dark-form-text
#d4d4d4
Affects the label color of the Progress. It also affects other components: Checkbox, Switch, Radio button, Button, Slider, Segmented, Stepper, Rating and Groups
$mbsc-material-dark-form-accent
#81ccc4
Affects the accent color of the Progress along with the Checkbox, Switch, Radio button, Button, Slider, Segmented, Stepper, Rating and Groups controls.
Material theme variables for the Progress component

Mobiscroll theme

The following variables are specific to the Mobiscroll theme light variant:

Variable name Default value Description
$mbsc-mobiscroll-form-background
#f7f7f7
Affects the background color of the Progress along with the Checkbox, Switch, Radio button, Button, Slider, Segmented, Stepper, Rating and Groups
$mbsc-mobiscroll-form-text
#454545
Affects the label color of the Progress. It also affects other components: Checkbox, Switch, Radio button, Button, Slider, Segmented, Stepper, Rating and Groups
$mbsc-mobiscroll-form-accent
#4fccc5
Affects the accent color of the Progress along with the Checkbox, Switch, Radio button, Button, Slider, Segmented, Stepper, Rating and Groups controls.

Mobiscroll Dark theme

The following variables are specific to the Mobiscroll theme dark variant:

Variable name Default value Description
$mbsc-mobiscroll-dark-form-background
#263239
Affects the background color of the Progress along with the Checkbox, Switch, Radio button, Button, Slider, Segmented, Stepper, Rating and Groups
$mbsc-mobiscroll-dark-form-text
#f7f7f7
Affects the label color of the Progress. It also affects other components: Checkbox, Switch, Radio button, Button, Slider, Segmented, Stepper, Rating and Groups
$mbsc-mobiscroll-dark-form-accent
#4fccc5
Affects the accent color of the Progress along with the Checkbox, Switch, Radio button, Button, Slider, Segmented, Stepper, Rating and Groups controls.

If you are looking for the generic Form variables and how they affect the form in general, check out the tables and pictures here.

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 mbsc-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" mbsc-segmented data-icon="plus" name="group1" checked>
</label>
<label>
    <input type="radio" mbsc-segmented data-icon="minus" name="group1">
</label>
<label>
    <input type="radio" mbsc-segmented data-icon="key2" name="group1">
</label>
With text
<label>
    Option 1
    <input type="radio" mbsc-segmented name="group2" >
</label>
<label>
    Option 2
    <input type="radio" mbsc-segmented name="group2" checked >
</label>
<label>
    Option 3
    <input type="radio" mbsc-segmented name="group2">
</label>
<label>
    Option 4
    <input type="radio" mbsc-segmented name="group2" >
</label>
With icon and text
<label>
    Desktop
    <input type="radio" mbsc-segmented data-icon="home" name="group3" >
</label>
<label>
    Mobile
    <input type="radio" mbsc-segmented data-icon="mobile" name="group3">
</label>
<label>
    Cloud
    <input type="radio" mbsc-segmented data-icon="cloud-upload" name="group3" checked>
</label>
Mobiscroll includes several predefined color presets, each serving its own semantic purpose
<label class="mbsc-segmented-danger">
    Desktop
    <input type="radio" mbsc-segmented data-icon="home" name="group-danger" >
</label>
<label class="mbsc-segmented-danger">
    Mobile
    <input type="radio" mbsc-segmented data-icon="mobile" name="group-danger" checked>
</label>
<label class="mbsc-segmented-danger">
    Cloud
    <input type="radio" mbsc-segmented data-icon="cloud-upload" name="group-danger" >
</label>
<label class="mbsc-segmented-warning">
    Desktop
    <input type="radio" mbsc-segmented data-icon="home" name="group-warning" >
</label>
<label class="mbsc-segmented-warning">
    Mobile
    <input type="radio" mbsc-segmented data-icon="mobile" name="group-warning" checked>
</label>
<label class="mbsc-segmented-warning">
    Cloud
    <input type="radio" mbsc-segmented data-icon="cloud-upload" name="group-warning" >
</label>
<label class="mbsc-segmented-info">
    Desktop
    <input type="radio" mbsc-segmented data-icon="home" name="group-info">
</label>
<label class="mbsc-segmented-info">
    Mobile
    <input type="radio" mbsc-segmented data-icon="mobile" name="group-info" checked>
</label>
<label class="mbsc-segmented-info">
    Cloud
    <input type="radio" mbsc-segmented data-icon="cloud-upload" name="group-info" >
</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>
mbsc-segmented If a radio input has the mbsc-segmented attribute, it will transformed into a segmented control.
disabled If an element has the disabled attribute, the element will be disabled.

Segmented theming

Global variables of the Segmented

Below you will find a list of SASS variables that affect the Segmented:

Variable name Description
$mbsc-form-background-light Affects the background color of the Segmented along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Stepper, Rating and Groups
$mbsc-form-background-dark
$mbsc-form-text-light Affects the label color of the Segmented.
It also affects other components: Checkbox, Switch, Radio button, Button, Slider, Progress, Stepper, Rating and Groups
$mbsc-form-text-dark
$mbsc-form-accent-light Affects the accent color of the Segmented along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Stepper, Rating and Groups controls.
$mbsc-form-accent-dark

If you really want to get sophisticated or if a color doesn't look good on a specific theme and you want to overwrite it, you can fine tune all of the above variables individually for each theme. Below are the complete list of variables broken down to themes:

iOS theme

The following variables are specific to the iOS theme light variant:

Variable name Default value Description
$mbsc-ios-form-background
#ffffff
Affects the background color of the Segmented along with the Checkbox, Switch, Radio button, Button, Progress, Stepper and Groups
$mbsc-ios-form-text
#000000
Affects the label color of the Segmented. It also affects other components: Checkbox, Switch, Radio button, Button, Progress, Stepper and Groups
$mbsc-ios-form-accent
#1273de
Affects the accent color of the Segmented along with the Checkbox, Switch, Radio button, Button, Progress, Stepper and Groups controls.

iOS Dark theme

The following variables are specific to the iOS theme dark variant:

Variable name Default value Description
$mbsc-ios-dark-form-background
#0f0f0f
Affects the background color of the Segmented along with the Checkbox, Switch, Radio button, Button, Progress, Stepper and Groups
$mbsc-ios-dark-form-text
#ffffff
Affects the label color of the Segmented. It also affects other components: Checkbox, Switch, Radio button, Button, Progress, Stepper and Groups
$mbsc-ios-dark-form-accent
#de7a13
Affects the accent color of the Segmented along with the Checkbox, Switch, Radio button, Button, Progress, Stepper and Groups controls.
iOS theme variables for the Segmented component

Windows theme

The following variables are specific to the Windows theme light variant:

Variable name Default value Description
$mbsc-windows-form-background
#ffffff
Affects the background color of the Segmented along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Stepper, Rating and Groups
$mbsc-windows-form-text
#262626
Affects the label color of the Segmented. It also affects other components: Checkbox, Switch, Radio button, Button, Slider, Progress, Stepper, Rating and Groups
$mbsc-windows-form-accent
#0078d7
Affects the accent color of the Segmented along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Stepper, Rating and Groups controls.

Windows Dark theme

The following variables are specific to the Windows theme dark variant:

Variable name Default value Description
$mbsc-windows-dark-form-background
#000000
Affects the background color of the Segmented along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Stepper, Rating and Groups
$mbsc-windows-dark-form-text
#ffffff
Affects the label color of the Segmented. It also affects other components: Checkbox, Switch, Radio button, Button, Slider, Progress, Stepper, Rating and Groups
$mbsc-windows-dark-form-accent
#0078d7
Affects the accent color of the Segmented along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Stepper, Rating and Groups controls.
Windows theme variables for the Segmented component

Material theme

The following variables are specific to the Material theme light variant:

Variable name Default value Description
$mbsc-material-form-background
#eeeeee
Affects the background color of the Segmented along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Stepper, Rating and Groups
$mbsc-material-form-text
#6d6d6d
Affects the label color of the Segmented. It also affects other components: Checkbox, Switch, Radio button, Button, Slider, Progress, Stepper, Rating and Groups
$mbsc-material-form-accent
#019687
Affects the accent color of the Segmented along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Stepper, Rating and Groups controls.

Material Dark theme

The following variables are specific to the Material theme dark variant:

Variable name Default value Description
$mbsc-material-dark-form-background
#303030
Affects the background color of the Segmented along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Stepper, Rating and Groups
$mbsc-material-dark-form-text
#d4d4d4
Affects the label color of the Segmented. It also affects other components: Checkbox, Switch, Radio button, Button, Slider, Progress, Stepper, Rating and Groups
$mbsc-material-dark-form-accent
#81ccc4
Affects the accent color of the Segmented along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Stepper, Rating and Groups controls.
Material theme variables for the Segmented component

Mobiscroll theme

The following variables are specific to the Mobiscroll theme light variant:

Variable name Default value Description
$mbsc-mobiscroll-form-background
#f7f7f7
Affects the background color of the Segmented along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Stepper, Rating and Groups
$mbsc-mobiscroll-form-text
#454545
Affects the label color of the Segmented. It also affects other components: Checkbox, Switch, Radio button, Button, Slider, Progress, Stepper, Rating and Groups
$mbsc-mobiscroll-form-accent
#4fccc5
Affects the accent color of the Segmented along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Stepper, Rating and Groups controls.

Mobiscroll Dark theme

The following variables are specific to the Mobiscroll theme dark variant:

Variable name Default value Description
$mbsc-mobiscroll-dark-form-background
#263239
Affects the background color of the Segmented along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Stepper, Rating and Groups
$mbsc-mobiscroll-dark-form-text
#f7f7f7
Affects the label color of the Segmented. It also affects other components: Checkbox, Switch, Radio button, Button, Slider, Progress, Stepper, Rating and Groups
$mbsc-mobiscroll-dark-form-accent
#4fccc5
Affects the accent color of the Segmented along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Stepper, Rating and Groups controls.

If you are looking for the generic Form variables and how they affect the form in general, check out the tables and pictures here.

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 mbsc-stepper will be transformed into a stepper control.

Simple stepper
<div>
    <label for="stepper-id">Label</label>
    <input id="stepper-id" mbsc-stepper >
</div>
Side value
<div>
    <label for="stepper-id">Label</label>  
    <input id="stepper-id" mbsc-stepper data-val="right">
</div>
With min, max and step
<div>
    <input mbsc-stepper value="-0.25" min="-10" max="10" step="0.25">
</div>
Mobiscroll includes several predefined color presets, each serving its own semantic purpose

<label class="mbsc-segmented-primary">
        primary
    <input type="number" mbsc-stepper value="50" min="-500" max="500" step="100">
</label>
<label class="mbsc-segmented-secondary">
        secondary
    <input type="number" mbsc-stepper value="50" min="-500" max="500" step="100">
</label>
<label class="mbsc-segmented-success">
        success
    <input type="number" mbsc-stepper value="50" min="-500" max="500" step="100">
</label>
<label class="mbsc-segmented-danger">
        danger
    <input type="number" mbsc-stepper value="50" min="-500" max="500" step="100">
</label>
<label class="mbsc-segmented-warning">
        warning
    <input type="number" mbsc-stepper value="50" min="-500" max="500" step="100">
</label>
<label class="mbsc-segmented-info">
        info
    <input type="number" mbsc-stepper value="50" min="-500" max="500" step="100">
</label>

Attributes

Name Description
data-enhance If a form element has the data-enhance="false" attribute, the particular element won't be enhanced.
mbsc-stepper If an input has the mbsc-stepper attribute, it will transformed into a stepper.
data-val Specify the value position. It can be "left", "right" or center. It defaults to "center" 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.

Stepper theming

Global variables of the Stepper

Below you will find a list of SASS variables that affect the Stepper:

Variable name Description
$mbsc-form-background-light Affects the background color of the Stepper along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Rating and Groups
$mbsc-form-background-dark
$mbsc-form-text-light Affects the label color of the Stepper.
It also affects other components: Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Rating and Groups
$mbsc-form-text-dark
$mbsc-form-accent-light Affects the accent color of the Stepper along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Rating and Groups controls.
$mbsc-form-accent-dark

If you really want to get sophisticated or if a color doesn't look good on a specific theme and you want to overwrite it, you can fine tune all of the above variables individually for each theme. Below are the complete list of variables broken down to themes:

iOS theme

The following variables are specific to the iOS theme light variant:

Variable name Default value Description
$mbsc-ios-form-background
#ffffff
Affects the background color of the Stepper along with the Checkbox, Switch, Radio button, Button, Progress, Segmented and Groups
$mbsc-ios-form-text
#000000
Affects the label color of the Stepper. It also affects other components: Checkbox, Switch, Radio button, Button, Progress, Segmented and Groups
$mbsc-ios-form-accent
#1273de
Affects the accent color of the Stepper along with the Checkbox, Switch, Radio button, Button, Progress, Segmented and Groups controls.

iOS Dark theme

The following variables are specific to the iOS theme dark variant:

Variable name Default value Description
$mbsc-ios-dark-form-background
#0f0f0f
Affects the background color of the Stepper along with the Checkbox, Switch, Radio button, Button, Progress, Segmented and Groups
$mbsc-ios-dark-form-text
#ffffff
Affects the label color of the Stepper. It also affects other components: Checkbox, Switch, Radio button, Button, Progress, Segmented and Groups
$mbsc-ios-dark-form-accent
#de7a13
Affects the accent color of the Stepper along with the Checkbox, Switch, Radio button, Button, Progress, Segmented and Groups controls.
iOS theme variables for the Stepper component

Windows theme

The following variables are specific to the Windows theme light variant:

Variable name Default value Description
$mbsc-windows-form-background
#ffffff
Affects the background color of the Stepper along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Rating and Groups
$mbsc-windows-form-text
#262626
Affects the label color of the Stepper. It also affects other components: Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Rating and Groups
$mbsc-windows-form-accent
#0078d7
Affects the accent color of the Stepper along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Rating and Groups controls.

Windows Dark theme

The following variables are specific to the Windows theme dark variant:

Variable name Default value Description
$mbsc-windows-dark-form-background
#000000
Affects the background color of the Stepper along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Rating and Groups
$mbsc-windows-dark-form-text
#ffffff
Affects the label color of the Stepper. It also affects other components: Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Rating and Groups
$mbsc-windows-dark-form-accent
#0078d7
Affects the accent color of the Stepper along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Rating and Groups controls.
Windows theme variables for the Stepper component

Material theme

The following variables are specific to the Material theme light variant:

Variable name Default value Description
$mbsc-material-form-background
#eeeeee
Affects the background color of the Stepper along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Rating and Groups
$mbsc-material-form-text
#6d6d6d
Affects the label color of the Stepper. It also affects other components: Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Rating and Groups
$mbsc-material-form-accent
#019687
Affects the accent color of the Stepper along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Rating and Groups controls.

Material Dark theme

The following variables are specific to the Material theme dark variant:

Variable name Default value Description
$mbsc-material-dark-form-background
#303030
Affects the background color of the Stepper along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Rating and Groups
$mbsc-material-dark-form-text
#d4d4d4
Affects the label color of the Stepper. It also affects other components: Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Rating and Groups
$mbsc-material-dark-form-accent
#81ccc4
Affects the accent color of the Stepper along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Rating and Groups controls.
Material theme variables for the Stepper component

Mobiscroll theme

The following variables are specific to the Mobiscroll theme light variant:

Variable name Default value Description
$mbsc-mobiscroll-form-background
#f7f7f7
Affects the background color of the Stepper along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Rating and Groups
$mbsc-mobiscroll-form-text
#454545
Affects the label color of the Stepper. It also affects other components: Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Rating and Groups
$mbsc-mobiscroll-form-accent
#4fccc5
Affects the accent color of the Stepper along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Rating and Groups controls.

Mobiscroll Dark theme

The following variables are specific to the Mobiscroll theme dark variant:

Variable name Default value Description
$mbsc-mobiscroll-dark-form-background
#263239
Affects the background color of the Stepper along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Rating and Groups
$mbsc-mobiscroll-dark-form-text
#f7f7f7
Affects the label color of the Stepper. It also affects other components: Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Rating and Groups
$mbsc-mobiscroll-dark-form-accent
#4fccc5
Affects the accent color of the Stepper along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Rating and Groups controls.

If you are looking for the generic Form variables and how they affect the form in general, check out the tables and pictures here.

Rating

The rating control can be used to select one numeric value.
Inputs with type="rating" will be transformed into rating controls.

Simple rating
<label>
    Label
    <input mbsc-rating type="rating">
</label>
With custom icons
<label>
    Label
    <input mbsc-rating type="rating" data-empty="heart2" data-filled="heart">
</label>
With value and template
<label>
    Label 
    <input mbsc-rating type="rating" data-val="left" data-template="{value}/{max}">
</label>
With steps
<label>
    Label 
    <input mbsc-rating type="rating" step=".5" min="0" max="3" value="1.5">
</label>
Mobiscroll includes several predefined color presets, each serving its own semantic purpose
<label class="mbsc-rating-primary">
    Primary
    <input mbsc-rating type="rating" />
</label>
<label class="mbsc-rating-secondary">
    Secondary 
    <input mbsc-rating type="rating" />
</label>
<label class="mbsc-rating-success">
    Success 
    <input mbsc-rating type="rating" />
</label>
<label class="mbsc-rating-danger">
    Danger 
    <input mbsc-rating type="rating" />
</label>
<label class="mbsc-rating-warning">
    Warning 
    <input mbsc-rating type="rating" />
</label>
<label class="mbsc-rating-info">
    Info 
    <input mbsc-rating type="rating" />
</label>

Attributes

Name Description
data-empty Specify the icon for the unselected values. A font-icon name should be passed.
data-filled Specify the icon for the selected values. A font-icon name should be passed.
data-template Template for the rating value. '{value}' stands for the rating current value, and '{max}' stands for the rating maximum value. Any other character in the template will be handled as literal string.
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 rating.

Methods

Name Description
getVal() Returns the rating value.

Returns: Number

  • The rating value.

Example

Methods can be called on an instance. For more details see calling methods
// With selector
$('#mobiscroll').mobiscroll('getVal');

// With instance
mobiscrollInstance.getVal();
setVal(value) Sets the rating value.

Parameters

  • value: Number - The rating value.

Example

Methods can be called on an instance. For more details see calling methods
// With selector
$('#mobiscroll').mobiscroll('setVal', 50);

// With instance
mobiscrollInstance.setVal(50);

Rating theming

Global variables of the Rating

Below you will find a list of SASS variables that affect the Rating:

Variable name Description
$mbsc-form-background-light Affects the background color of the Rating along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Stepper and Groups
$mbsc-form-background-dark
$mbsc-form-text-light Affects the label color of the Rating.
It also affects other components: Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Stepper and Groups
$mbsc-form-text-dark
$mbsc-form-accent-light Affects the accent color of the Rating along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Stepper and Groups controls.
$mbsc-form-accent-dark

If you really want to get sophisticated or if a color doesn't look good on a specific theme and you want to overwrite it, you can fine tune all of the above variables individually for each theme. Below are the complete list of variables broken down to themes:

Windows theme

The following variables are specific to the Windows theme light variant:

Variable name Default value Description
$mbsc-windows-form-background
#ffffff
Affects the background color of the Rating along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Stepper and Groups
$mbsc-windows-form-text
#262626
Affects the label color of the Rating. It also affects other components: Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Stepper and Groups
$mbsc-windows-form-accent
#0078d7
Affects the accent color of the Rating along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Stepper and Groups controls.

Windows Dark theme

The following variables are specific to the Windows theme dark variant:

Variable name Default value Description
$mbsc-windows-dark-form-background
#000000
Affects the background color of the Rating along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Stepper and Groups
$mbsc-windows-dark-form-text
#ffffff
Affects the label color of the Rating. It also affects other components: Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Stepper and Groups
$mbsc-windows-dark-form-accent
#0078d7
Affects the accent color of the Rating along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Stepper and Groups controls.
Windows theme variables for the Rating component

Material theme

The following variables are specific to the Material theme light variant:

Variable name Default value Description
$mbsc-material-form-background
#eeeeee
Affects the background color of the Rating along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Stepper and Groups
$mbsc-material-form-text
#6d6d6d
Affects the label color of the Rating. It also affects other components: Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Stepper and Groups
$mbsc-material-form-accent
#019687
Affects the accent color of the Rating along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Stepper and Groups controls.

Material Dark theme

The following variables are specific to the Material theme dark variant:

Variable name Default value Description
$mbsc-material-dark-form-background
#303030
Affects the background color of the Rating along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Stepper and Groups
$mbsc-material-dark-form-text
#d4d4d4
Affects the label color of the Rating. It also affects other components: Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Stepper and Groups
$mbsc-material-dark-form-accent
#81ccc4
Affects the accent color of the Rating along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Stepper and Groups controls.
Material theme variables for the Rating component

Mobiscroll theme

The following variables are specific to the Mobiscroll theme light variant:

Variable name Default value Description
$mbsc-mobiscroll-form-background
#f7f7f7
Affects the background color of the Rating along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Stepper and Groups
$mbsc-mobiscroll-form-text
#454545
Affects the label color of the Rating. It also affects other components: Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Stepper and Groups
$mbsc-mobiscroll-form-accent
#4fccc5
Affects the accent color of the Rating along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Stepper and Groups controls.

Mobiscroll Dark theme

The following variables are specific to the Mobiscroll theme dark variant:

Variable name Default value Description
$mbsc-mobiscroll-dark-form-background
#263239
Affects the background color of the Rating along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Stepper and Groups
$mbsc-mobiscroll-dark-form-text
#f7f7f7
Affects the label color of the Rating. It also affects other components: Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Stepper and Groups
$mbsc-mobiscroll-dark-form-accent
#4fccc5
Affects the accent color of the Rating along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Stepper and Groups controls.

If you are looking for the generic Form variables and how they affect the form in general, check out the tables and pictures here.

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.

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

Attributes

Name Description
data-collapsible If a form group has the data-collapsible attribute, the form content will be collapsible. Collapsed is the default state of the collapsible content. It can be changed with the help of the data-open attribute.
data-open If a form group has the data-open attribute, the form group collapsible will be opened by default.

Methods

Name Description
hide() Hides the collapsible form group content.
show() Displays the collapsible form group content.
toggle() Toggles the collapsible form group content displaying.

Groups theming

Global variables of the Groups

Below you will find a list of SASS variables that affect the Groups:

Variable name Description
$mbsc-form-background-light Affects the background color of the Groups along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Stepper and Rating
$mbsc-form-background-dark
$mbsc-form-text-light Affects the label color of the Groups.
It also affects other components: Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Stepper and Rating
$mbsc-form-text-dark
$mbsc-form-group-title-text-light Sets the text color of the form group title
$mbsc-form-group-title-text-dark

If you really want to get sophisticated or if a color doesn't look good on a specific theme and you want to overwrite it, you can fine tune all of the above variables individually for each theme. Below are the complete list of variables broken down to themes:

iOS theme

The following variables are specific to the iOS theme light variant:

Variable name Default value Description
$mbsc-ios-form-background
#ffffff
Affects the background color of the Groups along with the Checkbox, Switch, Radio button, Button, Progress, Segmented and Stepper
$mbsc-ios-form-text
#000000
Affects the label color of the Groups. It also affects other components: Checkbox, Switch, Radio button, Button, Progress, Segmented and Stepper
$mbsc-ios-form-group-title-text
#707070
The form group title text color

iOS Dark theme

The following variables are specific to the iOS theme dark variant:

Variable name Default value Description
$mbsc-ios-dark-form-background
#0f0f0f
Affects the background color of the Groups along with the Checkbox, Switch, Radio button, Button, Progress, Segmented and Stepper
$mbsc-ios-dark-form-text
#ffffff
Affects the label color of the Groups. It also affects other components: Checkbox, Switch, Radio button, Button, Progress, Segmented and Stepper
$mbsc-ios-dark-form-group-title-text
#8f8f8f
The form group title text color
iOS theme variables for the Groups component

Windows theme

The following variables are specific to the Windows theme light variant:

Variable name Default value Description
$mbsc-windows-form-background
#ffffff
Affects the background color of the Groups along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Stepper and Rating
$mbsc-windows-form-text
#262626
Affects the label color of the Groups. It also affects other components: Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Stepper and Rating
$mbsc-windows-form-group-title-text
#262626
The form group title text color

Windows Dark theme

The following variables are specific to the Windows theme dark variant:

Variable name Default value Description
$mbsc-windows-dark-form-background
#000000
Affects the background color of the Groups along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Stepper and Rating
$mbsc-windows-dark-form-text
#ffffff
Affects the label color of the Groups. It also affects other components: Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Stepper and Rating
$mbsc-windows-dark-form-group-title-text
#ffffff
The form group title text color
Windows theme variables for the Groups component

Material theme

The following variables are specific to the Material theme light variant:

Variable name Default value Description
$mbsc-material-form-background
#eeeeee
Affects the background color of the Groups along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Stepper and Rating
$mbsc-material-form-text
#6d6d6d
Affects the label color of the Groups. It also affects other components: Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Stepper and Rating
$mbsc-material-form-group-title-text
#009688
The form group title text color

Material Dark theme

The following variables are specific to the Material theme dark variant:

Variable name Default value Description
$mbsc-material-dark-form-background
#303030
Affects the background color of the Groups along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Stepper and Rating
$mbsc-material-dark-form-text
#d4d4d4
Affects the label color of the Groups. It also affects other components: Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Stepper and Rating
$mbsc-material-dark-form-group-title-text
#81ccc4
The form group title text color
Material theme variables for the Groups component

Mobiscroll theme

The following variables are specific to the Mobiscroll theme light variant:

Variable name Default value Description
$mbsc-mobiscroll-form-background
#f7f7f7
Affects the background color of the Groups along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Stepper and Rating
$mbsc-mobiscroll-form-text
#454545
Affects the label color of the Groups. It also affects other components: Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Stepper and Rating
$mbsc-mobiscroll-form-group-title-text
#4eccc4
The form group title text color

Mobiscroll Dark theme

The following variables are specific to the Mobiscroll theme dark variant:

Variable name Default value Description
$mbsc-mobiscroll-dark-form-background
#263239
Affects the background color of the Groups along with the Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Stepper and Rating
$mbsc-mobiscroll-dark-form-text
#f7f7f7
Affects the label color of the Groups. It also affects other components: Checkbox, Switch, Radio button, Button, Slider, Progress, Segmented, Stepper and Rating
$mbsc-mobiscroll-dark-form-group-title-text
#4fccc4
The form group title text color

If you are looking for the generic Form variables and how they affect the form in general, check out the tables and pictures here.

Notes

Provide inline feedback messages for typical user actions. The notes include several predefined colors, each serving its own semantic purpose.

For proper styling, use one of the eight required contextual classes (e.g. .mbsc-note-warning).

Predefined note styles
<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>

Accordion

Using the Accordion component, you can organize the Form group and Card collapsible elements. Accordion allows showing only one collapsible item at the same time.

Initialization

Simply put the mbsc-accordion attribute on the container element. The accordion will be automatically initialized when the page is loaded.

Accordion with form groups
<div mbsc-accordion>
    <div class="mbsc-form-group" data-collapsible>
        <div class="mbsc-form-group-title">
            Form group title
        </div>
        <div class="mbsc-form-group-content">
            Form Group content...
        </div>
    </div>
    
    <div class="mbsc-form-group" data-collapsible>
        <div class="mbsc-form-group-title">
            Form group title
        </div>
        <div class="mbsc-form-group-content">
            Form Group content...
        </div>
    </div>
    
    <!-- ... -->
</div>
Accordion with
<div mbsc-accordion>
    <div mbsc-card data-collapsible data-open>
        <div class="mbsc-card-header">
            <div class="mbsc-card-title">Card title</div>
            <div class="mbsc-card-subtitle">Card subtitle</div>
        </div>
        <div class="mbsc-card-content">
            Card content...
        </div>
    </div>
    
    <div mbsc-card data-collapsible>
        <div class="mbsc-card-header">
            <div class="mbsc-card-title">Card title</div>
            <div class="mbsc-card-subtitle">Card subtitle</div>
        </div>
        <div class="mbsc-card-content">
            Card content...
        </div>
    </div>
    
    <!-- ... -->
</div>