Forms - Desktop form

Use the grid layout to create single and multiple column forms suited for medium and large screens. Don't go overboard with too many columns but make use of the available horizontal space on bigger screens.

Use the global settings for setting the theme, localization options and everything that should be consistent across your app.

Forms - Custom usage

While using mobiscroll forms on its own is great and easy there are a lot of cases where a mixed solution is required. There are three common approaches we came across that are covered by this example.

Use mobiscroll form elements inside your existing forms. This is a common scenario that you can come across. Your page is already functional, designed and you would like to update/change a single piece or add something new. Use a stand-alone element like the mbsc-switch in the example.

Use custom styled elements inside mobiscroll forms. Let's say you mostly use mobiscroll on your pages and forms but you also have custom components that you'd like to apply. In that case you want to turn all enahncements off for that element with the the data-enhance="false" property.

Use mobiscroll form elements outside of an actual form. Also a common use case, think of some content like a couple paragraphs and a subscribe call to action in the middle. Use the stand-alone controls, like mbsc-input and mbsc-button elements.

Forms - Validation

Mobiscroll does not have built in validation mechanism, but provides error state styling. Use the mbsc-err css class on the form element's container and the mbsc-err-msg css class on the error message.