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.

<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.
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' - new iOS 7, 8, 9 theme
  • 'material' - Material theme (Android 5.x)
  • 'material-dark' - Material dark theme (Android 5.x)
  • 'mobiscroll' - Mobiscroll theme
  • 'mobiscroll-dark' - Mobiscroll Dark theme
  • 'windows' - Windows theme
  • 'windows-dark' - Windows theme (dark version)
It's possible to create custom themes in css by prefixing any css class used in the forms markup with the theme name and the 'mbsc' prefix, e.g.: .mbsc-my-theme .dwwr { /* My CSS */ }, and set the theme option to 'my-theme'
Make sure that the theme you set is included in the downloaded package.

Events

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

Parameters

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

Example

<mobiscroll.Forms
    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 shown 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;

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

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

<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.
data-role If a checkbox input has the data-role="switch" attribute, it will be transformed into a switch.
disabled If an element has the disabled attribute, the element will be disabled.

Methods

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

Returns: Boolean

  • The state of the switch value.

Example

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

Parameters

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

Example

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

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

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 data-role="segmented" will be transformed into a segmented control.
Just like radio buttons, the segments are grouped by the name attribute of the input.

<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.
data-role If an input has the data-role="stepper" attribute, it will transformed into a stepper.
data-val Specify the value position. It can be "left", "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>