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:

<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

Events

<mobiscroll.Forms
    onInit={function (event, inst) {
    }}
/>

Methods

mobiscrollInstance.getInst();

mobiscrollInstance.option({
    display: 'bottom',
    lang: 'de'
});

mobiscrollInstance.refresh();

mobiscrollInstance.tap('#element', function () { alert("It's a tap!"); });

Localization

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:

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.

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:

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:

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

<mobiscroll.Input value={myValue} onChange={myChange}>
    Username
</mobiscroll.Input>

<mobiscroll.Input value={myValue} onChange={myChange} />

Icons

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

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

<mobiscroll.Input inputStyle="underline" value={myValue} onChange={myChange}>
    Username
</mobiscroll.Input>

<mobiscroll.Input inputStyle="box" value={myValue} onChange={myChange}>
    Username
</mobiscroll.Input>

<mobiscroll.Input inputStyle="outline" value={myValue} onChange={myChange}>
    Username
</mobiscroll.Input>

Label style

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

<mobiscroll.Input labelStyle="stacked" value={myValue} onChange={myChange}>
    Username
</mobiscroll.Input>

<mobiscroll.Input labelStyle="inline" value={myValue} onChange={myChange}>
    Username
</mobiscroll.Input>

<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

<mobiscroll.Input type="password" placeholder="Password" value={myValue} onChange={myChange}>
    Password
</mobiscroll.Input>

<mobiscroll.Input type="password" passwordToggle={true} iconShow="eye" iconHide="eye-blocked" value={myValue} onChange={myChange}>
    Password
</mobiscroll.Input>

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

<mobiscroll.Input type="file" placeholder="Select file..." iconUpload="cloud-upload">
    Upload
</mobiscroll.Input>

<div class="mbsc-ic mbsc-ic-star"></div>

Textarea

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

<mobiscroll.Textarea value={myValue} onChange={myChange}>
    About me
</mobiscroll.Textarea>

<mobiscroll.Textarea value={myValue} onChange={myChange} />

<div class="mbsc-ic mbsc-ic-star"></div>

Icons

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

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

<mobiscroll.Textarea inputStyle="underline" value={myValue} onChange={myChange}">
    About me
</mobiscroll.Textarea>

<mobiscroll.Textarea inputStyle="box" value={myValue} onChange={myChange}">
    About me
</mobiscroll.Textarea>

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

<mobiscroll.Textarea labelStyle="stacked" value={myValue} onChange={myChange}>
    About me
</mobiscroll.Textarea>

<mobiscroll.Textarea labelStyle="inline" value={myValue} onChange={myChange}>
    About me
</mobiscroll.Textarea>

<mobiscroll.Textarea labelStyle="floating" value={myValue} onChange={myChange}>
    About me
</mobiscroll.Textarea>

<mobiscroll.Dropdown />

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

<mobiscroll.Dropdown value={myValue} onChange={myChange}>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</mobiscroll.Dropdown>

<div class="mbsc-ic mbsc-ic-star"></div>

Icons

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

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

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

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

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

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

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

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

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

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

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:

<mobiscroll.Switch value={this.state.lights} onChange={this.lightsChanged}>
    Lights
</mobiscroll.Switch>

Attributes

Methods

mobiscrollInstance.getVal();

mobiscrollInstance.setVal(false);

<mobiscroll.Radio />

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

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

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

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

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

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

<div class="mbsc-ic mbsc-ic-star"></div>

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:

<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

<div class="mbsc-ic mbsc-ic-star"></div>

Methods

mobiscrollInstance.getVal();

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:

<mobiscroll.Progress value={this.state.loadingProgress} max={100} data-icon="home" data-val="left">
    Loading
</mobiscroll.Progress>

Attributes

<div class="mbsc-ic mbsc-ic-star"></div>

Methods

mobiscrollInstance.getVal();

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

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

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

<div class="mbsc-ic mbsc-ic-star"></div>

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:

<mobiscroll.Stepper value={this.state.adults} onChange={this.adultsChanged} min={0} max={10}>
    Number of adults
</mobiscroll.Stepper>

Attributes

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:

<mobiscroll.Rating value={10} max={20} min={5} >
    Simple Rating
</mobiscroll.Rating>

Attributes

Methods

mobiscrollInstance.getVal();

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.

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

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

<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

Notes

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

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

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

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