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.

<mobiscroll.Form />

The mobiscroll.Form by default renders a form element. If the first child of the mobiscroll.Form is a form component, then it will use that, and won't render an additional form.
Above the Forms options, it supports the following props:

Prop Type Description
action string It will be passed to the rendered form. Used for setting the forms action attribute.
autocomplete bool It will be passed to the rendered form. Used for setting the forms autocomplete attribute.
className string Used to add css classes to the rendered form
method string It will be passed to the rendered form. Used for setting the forms method.
name string It will be passed to the rendered form. Used for setting the forms name attribute.
novalidate bool It will be passed to the rendered form. Used for setting the forms novalidate attribute.
onSubmit function It will be passed to the rendered form. Used for handling the form submit event.
target string It will be passed to the rendered form. Used for setting the forms target.
renderForm bool If false, forces the mobiscroll.Form to not render a form element. In this case the children must be wrapped in a single element that has the mobiscroll.Form as its parent.
Here is an example for the forms component
<mobiscroll.Form theme="mobiscroll-dark" action="/login" method='POST'>
    <p>This is a Login demo with Mobiscroll Form</p>
    <mobiscroll.Input type="email" value={this.state.email} onChange={this.emailChanged}>
        Email
    </mobiscroll.Input>
    <mobiscroll.Input type="password" value={this.state.password} onChange={this.passwordChanged}>
        Password
    </mobiscroll.Input>
    <button type="button" onClick={this.submit}>Sign In</button>
</mobiscroll.Form>

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 false 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.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
mobiscrollInstance.getInst();
option(options) Sets one or more options for the component.

Parameters

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

Example

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

Example

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

Parameters

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

Example

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

Localization

Name Type Default value Description
lang String 'en-US' Language of the component. Based on the language string the component loads the language based default settings from the language modules.
Supported languages:
  • 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

The Mobiscroll Forms component does not have built in validation mechanism, but provides error state stylings.
Use the valid and errorMessage props, to marke a field invalid and show the error message wanted.

<mobiscroll.Input valid={false} errorMessage="Invalid input">
    Username
</mobiscroll.Input>
    

Examples of how to implement simple validation logic on form fields can be found here

Sample validation using the formsy-react package.

The formsy-react third party package is a form input builder and validator for React.

The following is an example of how to use the mobiscroll react components with formsy:

In order for this to work, you will need to install the formsy-react package in your app.
Check out formsy-react on npm
Or formsy-react on github

1. Step: Building a formsy element

First we need to import the withFormsy higher order component from the formsy-react package. Then we need Mobiscroll Form Components. In this example we will use a Mobiscroll Input, but the othere form components (dropdown, textarea) work the same way.

Simple input with label
import { withFormsy } from 'formsy-react';
import mobiscroll from './lib/mobiscroll.react';

We need a way to pass the formsy validation error and error state to the mobiscroll input. We are going to create a component for that:

/myinput.jsx
class MidInput extends React.Component {
  constructor(props) {
    super(props);
    this.changeValue = this.changeValue.bind(this);
  }

  changeValue(event) {
    // setValue() will set the value of the component, which in
    // turn will validate it and the rest of the form
    // Important: Don't skip this step. This pattern is required
    // for Formsy to work.
    this.props.setValue(event.currentTarget.value);
  }

  render() {
    // An error message is returned only if the component is invalid
    const errorMessage = this.props.getErrorMessage();

    return (
      <mobiscroll.Input onChange={this.changeValue} value={this.props.getValue() || ''} errorMessage={errorMessage} valid={!errorMessage} type={this.props.type}>
        {this.props.children}
      </mobiscroll.Input>
    );
  }
}
    
export default withFormsy(MidInput);

2. Step: Using the input

We can now use the component the withFormsy higher order component returned. Let's import it and make a form:

/App.jsx
import MyInput from './myinput';
import mobiscroll from './lib/mobiscroll.react';

class App extends Component {
  render() {
    return (
        <Formsy onValidSubmit={this.submit} onValid={this.onValid} onInvalid={this.onInvalid}>
            <mobiscroll.Form renderForm={false}>
                <MyInput
                    name="email"
                    validations="isEmail"
                    validationError="This is not a valid email"
                    required>My Formsy Email</MyInput>

                <MyInput
                    name="password"
                    type="password"
                    validations="minLength:6"
                    validationError="Invalid"
                    validationErrors={{
                        minLength: 'Has to be min 6 chars'
                    }}
                    required>My Formsy Password</MyInput>
            </mobiscroll.Form>
        </Formsy>
    );
  }
}

export default App;

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/React/dist/css/mobiscroll.react.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

<mobiscroll.Input />

Textfields

Simple input with label
<mobiscroll.Input value={myValue} onChange={myChange}>
    Username
</mobiscroll.Input>
Without label
<mobiscroll.Input value={myValue} onChange={myChange} />

Icons

With left icon
<mobiscroll.Input icon="ion-ios7-email" type="email" value={myValue} onChange={myChange}>
    Email
</mobiscroll.Input>
With right icon
<mobiscroll.Input icon="ion-ios7-email" iconAlign="right" value={myValue} onChange={myChange}>
    Email
</mobiscroll.Input>

Input style

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

Underline input style
<mobiscroll.Input inputStyle="underline" value={myValue} onChange={myChange}>
    Username
</mobiscroll.Input>
Box input style
<mobiscroll.Input inputStyle="box" value={myValue} onChange={myChange}>
    Username
</mobiscroll.Input>
Outline input style
<mobiscroll.Input inputStyle="outline" value={myValue} onChange={myChange}>
    Username
</mobiscroll.Input>

Label style

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

Stacked label style
<mobiscroll.Input labelStyle="stacked" value={myValue} onChange={myChange}>
    Username
</mobiscroll.Input>
Inline label style
<mobiscroll.Input labelStyle="inline" value={myValue} onChange={myChange}>
    Username
</mobiscroll.Input>
Floating label style
<mobiscroll.Input labelStyle="floating" value={myValue} onChange={myChange}>
    Username
</mobiscroll.Input>

Password

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

Without toggle
<mobiscroll.Input type="password" placeholder="Password" value={myValue} onChange={myChange}>
    Password
</mobiscroll.Input>
With icons
<mobiscroll.Input type="password" passwordToggle={true} iconShow="eye" iconHide="eye-blocked" value={myValue} onChange={myChange}>
    Password
</mobiscroll.Input>
With custom icons
<mobiscroll.Input type="password" passwordToggle={true} iconShow="my-show-icon" iconHide="my-hide-icon" value={myValue} onChange={myChange}>
    Password
</mobiscroll.Input>

File upload input

You can change the file type input icon with the iconUpload prop.

File type input with icon
<mobiscroll.Input type="file" placeholder="Select file..." iconUpload="cloud-upload">
    Upload
</mobiscroll.Input>
Prop Type Description
disabled PropTypes.bool Disables the textfield when true.
errorMessage PropTypes.string Shown error message when the field is invalid.
icon PropTypes.string Specify icon for the field. A font-icon name should be passed.

Icon alignment can be controlled with the iconAlign attribute. Icons can be displayed on both sides by passing a JSON string with left and right properties containing icon names, e.g.: 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>
iconAlign PropTypes.string Controls icon alignment. Icons can be displayed on both sides by passing a JSON string with left and right properties containing icon names, e.g.: icon='{ "right": "plus", "left": "minus" }'.
iconHide PropTypes.string Specify icon for password hide. Defaults to eye-blocked.
iconShow PropTypes.string Specify icon for password show. Defaults to eye.
iconUpload PropTypes.string Specify icon for file type input. Defaults to upload.
inputStyle PropTypes.string Defines the input rendering mode. Possible values: "underline", "box", "outline".
labelStyle PropTypes.string Defines the position of the label. Possible values: "stacked", "inline", "floating".
name PropTypes.string Specify name attribute of the input.
passwordToggle PropTypes.bool When true, an icon is shown that toggles the visibility of the password.
type PropTypes.string Specify type attribute of the input.
valid PropTypes.bool Specify the valid state of the input. When false, the input will be styled as invalid.

Textarea

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

Simple textarea with label
<mobiscroll.Textarea value={myValue} onChange={myChange}>
    About me
</mobiscroll.Textarea>
Without label
<mobiscroll.Textarea value={myValue} onChange={myChange} />
Prop Type Description
disabled PropTypes.bool Disables the textfield when true.
errorMessage PropTypes.string Shown error message when the field is invalid.
icon PropTypes.string Specify icon for the field. A font-icon name should be passed.

Icon alignment can be controlled with the iconAlign attribute. Icons can be displayed on both sides by passing a JSON string with left and right properties containing icon names, e.g.: 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>
iconAlign PropTypes.string Controls icon alignment. Icons can be displayed on both sides by passing a JSON string with left and right properties containing icon names, e.g.: icon='{ "right": "plus", "left": "minus" }'.
name PropTypes.string Specify name attribute of the input.
valid PropTypes.bool Specify the valid state of the input. When false, the input will be styled as invalid.

Icons

With left icon
<mobiscroll.Textarea icon="line-note" value={myValue} onChange={myChange}>
    About me
</mobiscroll.Textarea>
With right icon
<mobiscroll.Textarea icon="line-note" iconAlign="right" value={myValue} onChange={myChange}>
    About me
</mobiscroll.Textarea>

Input style

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

Underline input style
<mobiscroll.Textarea inputStyle="underline" value={myValue} onChange={myChange}">
    About me
</mobiscroll.Textarea>
Box input style
<mobiscroll.Textarea inputStyle="box" value={myValue} onChange={myChange}">
    About me
</mobiscroll.Textarea>
Outline input style
<mobiscroll.Textarea inputStyle="outline" value={myValue} onChange={myChange}>
    About me
</mobiscroll.Textarea>

Label style

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

Stacked label style
<mobiscroll.Textarea labelStyle="stacked" value={myValue} onChange={myChange}>
    About me
</mobiscroll.Textarea>
Inline label style
<mobiscroll.Textarea labelStyle="inline" value={myValue} onChange={myChange}>
    About me
</mobiscroll.Textarea>
Floating label style
<mobiscroll.Textarea labelStyle="floating" value={myValue} onChange={myChange}>
    About me
</mobiscroll.Textarea>

Textfields Theming

Global variables of the Textfields

Variable name Description
$mbsc-input-background-light Sets the background color of the input
$mbsc-input-background-dark
$mbsc-input-text-light Sets the text color of the input
$mbsc-input-text-dark
$mbsc-form-input-border-light Sets the border color of the input
$mbsc-form-input-border-dark
$mbsc-input-accent-light Sets the accent color of the input
$mbsc-input-accent-dark
$mbsc-input-error-light Sets the error color of the input
$mbsc-input-error-dark

iOS theme

Variable name Default value Description
$mbsc-ios-input-background
#ffffff
The input background color
$mbsc-ios-input-text
#000000
The input text color
$mbsc-ios-input-border
#cccccc
The input border color
$mbsc-ios-input-error
#d8332a
The input error color

iOS Dark theme

Variable name Default value Description
$mbsc-ios-dark-input-background
#0f0f0f
The input background color
$mbsc-ios-dark-input-text
#ffffff
The input text color
$mbsc-ios-dark-input-border
#333333
The input border color
$mbsc-ios-dark-input-error
#d8332a
The input error color

Windows theme

Variable name Default value Description
$mbsc-windows-input-text
#262626
The input text color
$mbsc-windows-input-border
#999999
The input border color
$mbsc-windows-input-accent
#0078d7
The input accent color
$mbsc-windows-input-error
#d30101
The input error color

Windows Dark theme

Variable name Default value Description
$mbsc-windows-dark-input-text
#ffffff
The input text color
$mbsc-windows-dark-input-border
#737373
The input border color
$mbsc-windows-dark-input-accent
#0078d7
The input accent color
$mbsc-windows-dark-input-error
#d30101
The input error color

Material theme

Variable name Default value Description
$mbsc-material-input-text
#6d6d6d
The input text color
$mbsc-material-input-border
#6d6d6d
The input border color
$mbsc-material-input-accent
#009688
The input accent color
$mbsc-material-input-error
#de3226
The input error color

Material Dark theme

Variable name Default value Description
$mbsc-material-dark-input-text
#d4d4d4
The input text color
$mbsc-material-dark-input-border
#d4d4d4
The input border color
$mbsc-material-dark-input-accent
#81ccc4
The input accent color
$mbsc-material-dark-input-error
#de3226
The input error color

Mobiscroll theme

Variable name Default value Description
$mbsc-mobiscroll-input-text
#454545
The input text color
$mbsc-mobiscroll-input-border
#787878
The input border color
$mbsc-mobiscroll-input-accent
#4eccc4
The input accent color
$mbsc-mobiscroll-input-error
#de3226
The input error color

Mobiscroll Dark theme

Variable name Default value Description
$mbsc-mobiscroll-dark-input-text
#f7f7f7
The input text color
$mbsc-mobiscroll-dark-input-border
#ffffff
The input border color
$mbsc-mobiscroll-dark-input-accent
#4fccc4
The input accent color
$mbsc-mobiscroll-dark-input-error
#de3226
The input error color

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

<mobiscroll.Dropdown />

Simple select with label
<mobiscroll.Dropdown label="My select" value={myValue} onChange={myChange}>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</mobiscroll.Dropdown>
Without label
<mobiscroll.Dropdown value={myValue} onChange={myChange}>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</mobiscroll.Dropdown>
Prop Type Description
disabled PropTypes.bool Disables the textfield when true.
errorMessage PropTypes.string Shown error message when the field is invalid.
icon PropTypes.string Specify icon for the field. A font-icon name should be passed.

Icon alignment can be controlled with the iconAlign attribute. Icons can be displayed on both sides by passing a JSON string with left and right properties containing icon names, e.g.: 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>
iconAlign PropTypes.string Controls icon alignment. Icons can be displayed on both sides by passing a JSON string with left and right properties containing icon names, e.g.: icon='{ "right": "plus", "left": "minus" }'.
inputStyle PropTypes.string Defines the input rendering mode. Possible values: "underline", "box", "outline".
labelStyle PropTypes.string Defines the position of the label. Possible values: "stacked", "inline", "floating".
label PropTypes.string Shows a label for the dropdown.
name PropTypes.string Specify name attribute of the input.
valid PropTypes.bool Specify the valid state of the input. When false, the input will be styled as invalid.

Icons

With icon
<mobiscroll.Dropdown icon="line-note" value={myValue} onChange={myChange}>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</mobiscroll.Dropdown>
With right icon
<mobiscroll.Dropdown icon="line-note" iconAlign="right" value={myValue} onChange={myChange}>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</mobiscroll.Dropdown>

Input style

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

Underline input style
<mobiscroll.Dropdown inputStyle="underline" label="My select" value={myValue} onChange={myChange}>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</mobiscroll.Dropdown>
Box input style
<mobiscroll.Dropdown inputStyle="box" label="My select" value={myValue} onChange={myChange}>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</mobiscroll.Dropdown>
Outline input style
<mobiscroll.Dropdown inputStyle="outline" label="My select" value={myValue} onChange={myChange}>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</mobiscroll.Dropdown>

Label style

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

Stacked label style
<mobiscroll.Dropdown labelStyle="stacked" label="My select" value={myValue} onChange={myChange}>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</mobiscroll.Dropdown>
Inline label style
<mobiscroll.Dropdown labelStyle="inline" label="My select" value={myValue} onChange={myChange}>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</mobiscroll.Dropdown>
Floating label style
<mobiscroll.Dropdown labelStyle="floating" label="My select" value={myValue} onChange={myChange}>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</mobiscroll.Dropdown>

Dropdown Theming

Global variables of the Dropdown

Variable name Description
$mbsc-input-background-light Sets the background color of the input
$mbsc-input-background-dark
$mbsc-input-text-light Sets the text color of the input
$mbsc-input-text-dark
$mbsc-form-input-border-light Sets the border color of the input
$mbsc-form-input-border-dark
$mbsc-input-accent-light Sets the accent color of the input
$mbsc-input-accent-dark
$mbsc-input-error-light Sets the error color of the input
$mbsc-input-error-dark

iOS theme

Variable name Default value Description
$mbsc-ios-input-background
#ffffff
The input background color
$mbsc-ios-input-text
#000000
The input text color
$mbsc-ios-input-border
#cccccc
The input border color
$mbsc-ios-input-error
#d8332a
The input error color

iOS Dark theme

Variable name Default value Description
$mbsc-ios-dark-input-background
#0f0f0f
The input background color
$mbsc-ios-dark-input-text
#ffffff
The input text color
$mbsc-ios-dark-input-border
#333333
The input border color
$mbsc-ios-dark-input-error
#d8332a
The input error color

Windows theme

Variable name Default value Description
$mbsc-windows-input-text
#262626
The input text color
$mbsc-windows-input-border
#999999
The input border color
$mbsc-windows-input-accent
#0078d7
The input accent color
$mbsc-windows-input-error
#d30101
The input error color

Windows Dark theme

Variable name Default value Description
$mbsc-windows-dark-input-text
#ffffff
The input text color
$mbsc-windows-dark-input-border
#737373
The input border color
$mbsc-windows-dark-input-accent
#0078d7
The input accent color
$mbsc-windows-dark-input-error
#d30101
The input error color

Material theme

Variable name Default value Description
$mbsc-material-input-text
#6d6d6d
The input text color
$mbsc-material-input-border
#6d6d6d
The input border color
$mbsc-material-input-accent
#009688
The input accent color
$mbsc-material-input-error
#de3226
The input error color

Material Dark theme

Variable name Default value Description
$mbsc-material-dark-input-text
#d4d4d4
The input text color
$mbsc-material-dark-input-border
#d4d4d4
The input border color
$mbsc-material-dark-input-accent
#81ccc4
The input accent color
$mbsc-material-dark-input-error
#de3226
The input error color

Mobiscroll theme

Variable name Default value Description
$mbsc-mobiscroll-input-text
#454545
The input text color
$mbsc-mobiscroll-input-border
#787878
The input border color
$mbsc-mobiscroll-input-accent
#4eccc4
The input accent color
$mbsc-mobiscroll-input-error
#de3226
The input error color

Mobiscroll Dark theme

Variable name Default value Description
$mbsc-mobiscroll-dark-input-text
#f7f7f7
The input text color
$mbsc-mobiscroll-dark-input-border
#ffffff
The input border color
$mbsc-mobiscroll-dark-input-accent
#4fccc4
The input accent color
$mbsc-mobiscroll-dark-input-error
#de3226
The input error color

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

<mobiscroll.Checkbox />

Simple checkbox with label
<mobiscroll.Checkbox checked={myValue} onChange={myChange}>
    My Label
</mobiscroll.Checkbox>
Color presets
<mobiscroll.Checkbox color="primary" checked={myValue} onChange={myChange}>
    My Label
</mobiscroll.Checkbox>

<mobiscroll.Checkbox color="secondary" checked={myValue} onChange={myChange}>
    My Label
</mobiscroll.Checkbox>

<mobiscroll.Checkbox color="success" checked={myValue} onChange={myChange}>
    My Label
</mobiscroll.Checkbox>

<mobiscroll.Checkbox color="warning" checked={myValue} onChange={myChange}>
    My Label
</mobiscroll.Checkbox>

<mobiscroll.Checkbox color="danger" checked={myValue} onChange={myChange}>
    My Label
</mobiscroll.Checkbox>

<mobiscroll.Checkbox color="info" checked={myValue} onChange={myChange}>
    My Label
</mobiscroll.Checkbox>
Prop Type Description
checked PropTypes.bool Sets the checkbox checked state.
color PropTypes.string Specify the color preset of the checkbox. Can be one of "primary", "secondary", "success", "danger", "warning" and "info".
disabled PropTypes.bool Disables the checkbox when true.
name PropTypes.string Specify name attribute of the input.

Switch

Switches are bascially also checkboxes, but with a different style.

<mobiscroll.Switch />

The <mobiscroll.Switch /> renders a checkox input wrapped inside a label element.
In addition to the Switch attributes, it supports the following props:

Prop Type Description
value bool Sets the switch value.
onChange function Passed function will be called when the switch value changes.
ex: function changeHandler(event) { console.log('the switch is ' + (event.target.checked ? 'on': 'off')); }
<mobiscroll.Switch value={this.state.lights} onChange={this.lightsChanged}>
    Lights
</mobiscroll.Switch>

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
mobiscrollInstance.getVal();
setVal(value) Sets the state of the switch (true/false).

Parameters

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

Example

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

<mobiscroll.Radio />

Simple radio button group
<mobiscroll.Radio name="group1" value="val1" checked={this.state.myRadio === 'val1'} onChange={this.myRadioChanged}>
    Value 1
</mobiscroll.Radio>
<mobiscroll.Radio name="group1" value="val2" checked={this.state.myRadio === 'val2'} onChange={this.myRadioChanged}>
    Value 2
</mobiscroll.Radio>
<mobiscroll.Radio name="group1" value="val3" checked={this.state.myRadio === 'val3'} onChange={this.myRadioChanged}>
    Value 3
</mobiscroll.Radio>
Color presets
<mobiscroll.Radio color="primary" name="group1" value="val1" checked={this.state.myRadio === 'val1'} onChange={this.myRadioChanged}>
    Value 1
</mobiscroll.Radio>

<mobiscroll.Radio color="secondary" name="group1" value="val2" checked={this.state.myRadio === 'val2'} onChange={this.myRadioChanged}>
    Value 2
</mobiscroll.Radio>

<mobiscroll.Radio color="success" name="group1" value="val3" checked={this.state.myRadio === 'val3'} onChange={this.myRadioChanged}>
    Value 3
</mobiscroll.Radio>

<mobiscroll.Radio color="warning" name="group2" value="val1" checked={this.state.myRadio === 'val1'} onChange={this.myRadioChanged}>
    Value 1
</mobiscroll.Radio>

<mobiscroll.Radio color="danger" name="group2" value="val2" checked={this.state.myRadio === 'val2'} onChange={this.myRadioChanged}>
    Value 2
</mobiscroll.Radio>

<mobiscroll.Radio color="info" name="group2" value="val3" checked={this.state.myRadio === 'val3'} onChange={this.myRadioChanged}>
    Value 3
</mobiscroll.Radio>
Prop Type Description
checked PropTypes.bool Sets the radio button checked state.
color PropTypes.string Specify the color preset of the radio button. Can be one of "primary", "secondary", "success", "danger", "warning" and "info".
disabled PropTypes.bool Disables the radio button when true.
name PropTypes.string Specify name attribute of the radio. The radio buttons in a form are grouped by name.
value Any Specify value attribute of the radio.

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.

<mobiscroll.Button />

Button usages
<!-- Simple button -->
<mobiscroll.Button onClick={myClick}>My Button</mobiscroll.Button>

<!-- With icon -->
<mobiscroll.Button icon="pencil" onClick={myClick}>My Button</mobiscroll.Button>

<!-- Just icon -->
<mobiscroll.Button icon="plus" onClick={myClick} />

<!-- Flat button -->
<mobiscroll.Button flat={true} onClick={myClick}>My Button</mobiscroll.Button>

<!-- Outline button -->
<mobiscroll.Button outline={true} onClick={myClick}>My Button</mobiscroll.Button>

<!-- Full width button -->
<mobiscroll.Button block={true} onClick={myClick}>My Button</mobiscroll.Button>
Button groups
<!-- Button group -->
<div className="mbsc-btn-group">
    <mobiscroll.Button onClick={myClick}>Button 1</mobiscroll.Button>
    <mobiscroll.Button onClick={myClick}>Button 2</mobiscroll.Button>
    <mobiscroll.Button onClick={myClick}>Button 3</mobiscroll.Button>
</div>
Justified button group
<!-- Buttons are streched to fill the full width of the container.-->
<div className="mbsc-btn-group-justified">
    <mobiscroll.Button onClick={myClick}>Button 1</mobiscroll.Button>
    <mobiscroll.Button onClick={myClick}>Button 2</mobiscroll.Button>
    <mobiscroll.Button onClick={myClick}>Button 3</mobiscroll.Button>
</div>
Full width button group
<!-- Each button fills the whole width of the container. -->
<div className="mbsc-btn-group-block">
    <mobiscroll.Button onClick={myClick}>Button 1</mobiscroll.Button>
    <mobiscroll.Button onClick={myClick}>Button 2</mobiscroll.Button>
    <mobiscroll.Button onClick={myClick}>Button 3</mobiscroll.Button>
</div>
Mobiscroll includes several predefined button colors, each serving its own semantic purpose
<mobiscroll.Button color="primary" onClick={myClick}>Button Primary</mobiscroll.Button>
<mobiscroll.Button color="secondary" onClick={myClick}>Button Secondary</mobiscroll.Button>
<mobiscroll.Button color="success" onClick={myClick}>Button Success</mobiscroll.Button>
<mobiscroll.Button color="warning" onClick={myClick}>Button Warning</mobiscroll.Button>
<mobiscroll.Button color="danger" onClick={myClick}>Button Danger</mobiscroll.Button>
<mobiscroll.Button color="info" onClick={myClick}>Button Info</mobiscroll.Button>
Prop Type Description
block PropTypes.bool When true renders the button to take the full width of the container.
color PropTypes.string Specify the color preset of the button. Can be one of "primary", "secondary", "success", "danger", "warning" and "info".
disabled PropTypes.bool Disables the button when true.
flat PropTypes.bool When true renders the button with flat styling.
icon PropTypes.string Specify icon for the button. 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>
name PropTypes.string Specify name attribute for the button.
outline PropTypes.bool When true renders the button with outline styling.
type PropTypes.string Specify type attribute for the button.

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.

<mobiscroll.Slider />

The <mobiscroll.Slider /> renders single or multiple range inputs wrapped inside a label element, based on the value prop. In addition to the Slider attributes, it supports the following props:

Prop Type Description
value number or Array of numbers Sets the slider position. If Array of numbers are given, the slider will have multiple handles on it for each number.
onChange function Passed function will be called when the slider value changes. The first parameter will be the slider value
ex: function changeHandler(values) { console.log('the slider values', values); }
<mobiscroll.Slider value={10} max={20} min={5} data-tooltip="true" data-icon="link">
    My Single Slider
</mobiscroll.Slider>
    
<mobiscroll.Slider value={[this.state.firtValue, 50, 60]} data-icon="copy3" data-live={true} step={5} onChange={this.sliderChange} data-tooltip="true" data-step-labels="[0, 10, 20, 30, 40, 50]">
    My Multi-Handle Slider
</mobiscroll.Slider>

Attributes

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

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

See the full list of available icons here.

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

Methods

Name Description
getVal() Returns the slider value.

Returns: Number

  • The slider value.

Example

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

Parameters

  • value: Number - The slider value.

Example

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

Progress

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

<mobiscroll.Progress />

The <mobiscroll.Progress /> renders a progress element wrapped inside a label element.
In addition to the Progress attributes, it supports the following props:

Prop Type Description
value number Sets the progress value.
<mobiscroll.Progress value={this.state.loadingProgress} max={100} data-icon="home" data-val="left">
    Loading
</mobiscroll.Progress>

Attributes

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

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

See the full list of available icons here.

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

Methods

Name Description
getVal() Returns the progress value.

Returns: Number

  • The progress value.

Example

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

Parameters

  • value: Number - The progress value.

Example

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

Segmented control

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

<mobiscroll.Segmented />

Simple segmented groups
<mobiscroll.Segmented name="group1" value="val1" checked={this.state.myValue === 'val1'} onChange={this.myValueChanged}>
    Value 1
</mobiscroll.Segmented>
<mobiscroll.Segmented name="group1" value="val2" checked={this.state.myValue === 'val2'} onChange={this.myValueChanged}>
    Value 2
</mobiscroll.Segmented>
<mobiscroll.Segmented name="group1" value="val3" checked={this.state.myValue === 'val3'} onChange={this.myValueChanged}>
    Value 3
</mobiscroll.Segmented>
Color presets
<mobiscroll.Segmented color="primary" name="group1" value="val1" checked={this.state.myValue === 'val1'} onChange={this.myValueChanged}>
    Value 1
</mobiscroll.Segmented>
<mobiscroll.Segmented color="secondary" name="group1" value="val2" checked={this.state.myValue === 'val2'} onChange={this.myValueChanged}>
    Value 2
</mobiscroll.Segmented>
<mobiscroll.Segmented color="success" name="group1" value="val3" checked={this.state.myValue === 'val3'} onChange={this.myValueChanged}>
    Value 3
</mobiscroll.Segmented>

<mobiscroll.Segmented color="warning" name="group2" value="val1" checked={this.state.myValue === 'val1'} onChange={this.myValueChanged}>
    Value 1
</mobiscroll.Segmented>
<mobiscroll.Segmented color="danger" name="group2" value="val2" checked={this.state.myValue === 'val2'} onChange={this.myValueChanged}>
    Value 2
</mobiscroll.Segmented>
<mobiscroll.Segmented color="info" name="group2" value="val3" checked={this.state.myValue === 'val3'} onChange={this.myValueChanged}>
    Value 3
</mobiscroll.Segmented>
Prop Type Description
checked PropTypes.bool Sets the segmented control checked state.
color PropTypes.string Specify the color preset of the segmented control. Can be one of "primary", "secondary", "success", "danger", "warning" and "info".
disabled PropTypes.bool Disables the segmented control when true.
icon PropTypes.string Specify icon for the segmented control. 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>
name PropTypes.string Specify name attribute for the segmented control. The segmented buttons are grouped by their name prop

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.

<mobiscroll.Stepper />

The <mobiscroll.Stepper /> renders a text input wrapped inside a label element.
In addition to the Stepper attributes, it supports the following props:

Prop Type Description
value number Sets the stepper value.
onChange function Passed function will be called when the stepper value changes. The first parameter will be the change event
ex: function changeHandler(event) { console.log('the stepper value is ', +event.target.value); }
<mobiscroll.Stepper value={this.state.adults} onChange={this.adultsChanged} min={0} max={10}>
    Number of adults
</mobiscroll.Stepper>

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.

Rating

The rating control can be used to select one numeric value.

<mobiscroll.Rating />

The <mobiscroll.Rating /> renders a rating input wrapped inside a label element. In addition to the Rating attributes, it supports the following props:

Prop Type Description
value number Sets the rating value
onChange function Passed function will be called when the rating value changes. The first parameter will be the rating value
ex: function changeHandler(value) { console.log('the rating value', value); }
<mobiscroll.Rating value={10} max={20} min={5} >
    Simple Rating
</mobiscroll.Rating>

Attributes

Name Description
empty Specify the icon for the unselected values. A font-icon name should be passed.
filled Specify the icon for the selected values. A font-icon name should be passed.
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.
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.

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
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
mobiscrollInstance.setVal(50);

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.

Name Description
inset If the form group has an inset attribute then an inset from group will be rendered.
collapsible If the from group has this attribute the group content will be collapsible.
open If a form group has this attribute, the collapsible group content will be opened by default.
Form group
<mobiscroll.FormGroup>
    <mobiscroll.FormGroupTitle>Phone</mobiscroll.FormGroupTitle>
    <mobiscroll.FormGroupContent>
        <mobiscroll.Input id="email" type="email" name="Email" placeholder="Email" />
	<mobiscroll.Input name="password" placeholder="Password" passwordToggle={true} icon="none" iconAlign="right" />
    </mobiscroll.FormGroupContent>
</mobiscroll.FormGroup>
        
Form group inset
<mobiscroll.FormGroup inset> 
    <mobiscroll.FormGroupTitle>Phone</mobiscroll.FormGroupTitle>
    <mobiscroll.FormGroupContent>
        <mobiscroll.Input id="email" type="email" name="Email" placeholder="Email" />
	<mobiscroll.Input name="password" placeholder="Password" passwordToggle={true} icon="none" iconAlign="right" />
    </mobiscroll.FormGroupContent>
</mobiscroll.FormGroup>
Form group collapsible
<mobiscroll.FormGroup collapsible open>
    <mobiscroll.FormGroupTitle>Phone</mobiscroll.FormGroupTitle>
    <mobiscroll.FormGroupContent>
        <mobiscroll.Input id="email" type="email" name="Email" placeholder="Email" />
	<mobiscroll.Input name="password" placeholder="Password" passwordToggle={true} icon="none" iconAlign="right" />
    </mobiscroll.FormGroupContent>
</mobiscroll.FormGroup>
        

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.

Notes

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

Using the Note component:
<mobiscroll.Page theme="mobiscroll-dark">
    <mobiscroll.Note color="primary">This is a primary note</mobiscroll.Note>
    <mobiscroll.Note color="secondary">This is a secondary note</mobiscroll.Note>
    <mobiscroll.Note color="success">This is a success note</mobiscroll.Note>
    <mobiscroll.Note color="danger">This is a danger note</mobiscroll.Note>
    <mobiscroll.Note color="warning">This is a warning note</mobiscroll.Note>
    <mobiscroll.Note color="info">This is a info note</mobiscroll.Note>
    <mobiscroll.Note color="light">This is a light note</mobiscroll.Note>
    <mobiscroll.Note color="dark">This is a dark note</mobiscroll.Note>
</mobiscroll.Page>

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

Use the <mobiscroll.Accordion> component for initialization.

Accordion with form groups
<mobiscroll.Accordion>
    <mobiscroll.FormGroup ref="mbsc" collapsible open>
        <mobiscroll.FormGroupTitle>
            Title
        </mobiscroll.FormGroupTitle>
        <mobiscroll.FormGroupContent>
            Form group content...
        </mobiscroll.FormGroupContent>
    </mobiscroll.FormGroup>
    
    <mobiscroll.FormGroup ref="mbsc" collapsible>
        <mobiscroll.FormGroupTitle>
            Title 2
        </mobiscroll.FormGroupTitle>
        <mobiscroll.FormGroupContent>
            Form group content...
        </mobiscroll.FormGroupContent>
    </mobiscroll.FormGroup>
   //...
</mobiscroll.Accordion>
Accordion with cards
<mobiscroll.Accordion>
    <mobiscroll.Card collapsible>
        <mobiscroll.CardHeader>
            <mobiscroll.CardTitle>Title</mobiscroll.CardTitle>
            <mobiscroll.CardSubtitle>Subtitle</mobiscroll.CardSubtitle>
        </mobiscroll.CardHeader>
        <mobiscroll.CardContent>
            Card contetnt...
        </mobiscroll.CardContent>
    </mobiscroll.Card>
    <mobiscroll.Card collapsible>
        <mobiscroll.CardHeader>
            <mobiscroll.CardTitle>Title 2</mobiscroll.CardTitle>
            <mobiscroll.CardSubtitle>Subtitle</mobiscroll.CardSubtitle>
        </mobiscroll.CardHeader>
        <mobiscroll.CardContent>
            Card contetnt...
        </mobiscroll.CardContent>
    </mobiscroll.Card>
    //...
</mobiscroll.Accordion>