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;

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:

• Create custom themes using the theme builder - the custom themes can be also built using out theme builder, on a graphical user interface, without any coding, or the need for Sass support in your project.
• Create custom themes using Sass - use this, if you need multiple themes with different color variatons, in case you have pages with different colors, or you'd like to users to customize the colors of your app.
• Override the Sass color variables - the straightforward way to change the colors in one place throughout the application.

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"

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.

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

• Input
• Textarea
• Dropdown
• Button
• FormGroup

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

iOS Dark theme

Windows theme

Windows Dark theme

Material theme

Material Dark theme

Mobiscroll theme

Mobiscroll Dark theme

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>

Textfields Theming

Global variables of the Textfields

iOS theme

iOS Dark theme

Windows theme

Windows Dark theme

Material theme

Material Dark theme

Mobiscroll theme

Mobiscroll Dark theme

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

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

Dropdown Theming

Global variables of the Dropdown

iOS theme

iOS Dark theme

Windows theme

Windows Dark theme

Material theme

Material Dark theme

Mobiscroll theme

Mobiscroll Dark theme

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

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

Button Theming

Global variables of the Button

iOS theme

iOS Dark theme

Windwos theme

Windwos Dark theme

Material theme

Material Dark theme

Mobiscroll theme

Mobiscroll Dark theme

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:

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