Updated on Dec 16, 2024

Advanced React forms

Form fields from inputs, text areas to segmented controls & switches can be used in creating varied forms for event creation, edit and much more. Build custom forms for mobile, desktop with the responsive grid layout or render them in popups & modals for add/edit screens.

What you'll learn
Building forms Alerts & Notifications Buttons
Inputs & fields Toggle & radio Customizing the look & feel

React Forms Forms for React

Select the theme
iOS
Material
Windows
Auto-theme
Usage theme=""
You can turn auto theming on and let it decide based on the platform
Select light or dark mode
Light
Dark
Auto-theme-variant
Usage themeVariant=""
You can turn auto dark mode on based on system settings
Select the locale
Usage locale={}
Selecting the locale loads the localized settings and translated UI microcopy
Preview in fullscreen

Forms - Mobile form

Change demo

Easily create single column layouts and render mobile forms using the various form elements like buttons, inputs, radio buttons and more.

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

Building for larger screens?  See how to make forms for tablets & desktops →
Javascript jQuery Angular React Vue
Copy code
View React JS code on GitHub View React TS code on GitHub

Forms - Inline desktop form

Change demo

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 options for setting the theme, localization options and everything that should be consistent across your app.

Looking for mobile forms?  Learn how to create full width, single column forms →
Preview in fullscreen
Javascript jQuery Angular React Vue
Copy code
View React JS code on GitHub View React TS code on GitHub

Forms - Responsive form

Change demo

Build in responsiveness into your react form using the grid layout. Define how the form elements behave across multiple screen sizes.

  • The column widths will adapt to the screen size based on the predefined .mbsc-col-{breakpoint}-{size} classes.
  • The examples are using the .mbsc-col-md-6, .mbsc-col-lg-6 and .mbsc-col-lg-3 classes.
Change the viewport

Forms - Inside a modal

Change demo

When working with the event calendar you will usually want to show an add/edit form in a popup rather than render it directly into the page markup. Simply configure the popup and add your form fields to it.

Interested in add/edit screens for events?  Check out this example of a fully functional event form →

Forms - Alert, confirm & prompt

Change demo

Use the alert, confirm and prompt messages to pop a message box in the middle of the screen. Alert the user or collect feedback at the same time. These controls cannot be dismissed by pressing the overlay, which avoids closing it by mistake.

Forms - Toast & snackbar

Change demo

Use toast and snackbars to post updates to the users without interrupting them. These notifications can be top/bottom positioned and come in different colors.

Forms - Buttons

Change demo

Use the buttons on any mobile and desktop form or page. The buttons come with several rendering modes and styles. Use it as:

  • fluid-width buttons (the buttons grow with their content)
  • justified
  • full width buttons

Icon support is built in along with three different styles:

  • filled buttons
  • flat buttons
  • outlined buttons
Customize the look & feel:  See how to apply color presets →

Forms - Segmented

Change demo

Use the segmented control to render multiple-choice lists with single or multiple select. Use it as tabs, as a compact multi-choice UI instead of a checklist and even as an alternative to a radio buttons or a select.

Break the monotony of event add/edit forms by mixing it in with other inline fields.

Interested in add/edit screens for events?  Check out how the segmented can be used in an event form →

Forms - Stepper

Change demo

Use the stepper to enable controlled increasing and decreasing of values. Configure the steps and choose to provide an input for manual entry.

Forms - Colors

Change demo

Use presets with pre-defined colors on top of the theme colors. Every theme ships with eight customizable presets that can be used across various components including buttons, segmented and steppers:

  • Primary         
  • Secondary         
  • Success         
  • Danger         
  • Warning         
  • Info         
  • Light         
  • Dark         
Customize the colors or use your own colors:  Learn how to change the Sass variables for the presets →

Forms - Field types

Change demo

Use the input styling in desktop and mobile forms. The inputs feature three styles:

  • Underline
  • Box
  • Outline

Besides that, you can pick from three label types: inline, stacked and floating labels.

Play around and combine different input types with various label positions to find out what fits you best.

While Mobiscroll doesn’t provide built-in validation, it provides styling for error messages, disabled fields, labels and more. See how the fields look in different themes by changing it dynamically from the floating action bar on the right.

Forms - Customize the input

Change demo

The three input styles: underline, box and outline can be combined with three label styles: stacked, inline or floating. Try different combinations to find what's right for you.

Forms - Checkbox

Change demo

Use checkboxes for multiple choice lists or properties or true/false properties of an event. Different color presets are available.

Forms - Switch

Change demo

Use the switch for turning options and setting fields on/off. Different color presets are available.

Forms - Radio buttons

Change demo

Set up radio-button lists for mutually exclusive value selection. Different color presets are available.

Forms - Theming capabilities

Change demo

Forms can be themed and customized. There are four levels of customization:

  • Base themes: Choose between iOS, Material and Windows.
  • Light or dark: Every theme has a light and dark variant. Setting the themeVariant to 'auto' will switch based on system settings.
  • Custom themes: Use the theme builder to customize the colors and make it match your brand.
  • Custom Sass and CSS: If you need further customization, the sky is the limit with Sass and CSS overrides.

You can also see how the other demos look by changing the theme in the floating action bar on the right side (not this example, the themes are hardcoded here).

Looking for something you didn't see or have a sales question?
Ask us about it, we're here to help.

Get started with Mobiscroll for Angular

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for React

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for Javascript

Give the components a try in a starter app or see how they look in your project.

Get started with Mobiscroll for Vue

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for Ionic Vue

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for Ionic Angular

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for Ionic React

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for jQuery

Give the components a try in a starter app or see how they look in your project.

Already have an account?
Get started with Mobiscroll for Angular

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for React

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for Javascript

Give the components a try in a starter app or see how they look in your project.

Get started with Mobiscroll for Ionic Angular

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for Ionic React

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for jQuery

Give the components a try in a starter app or see how they look in your project.

Get started with Mobiscroll for Vue

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for Ionic Vue

Give the components a try locally and see how they look in your project.

Already have an account?
Simple two minute install guide for jQuery
Step 1.
Copy resources
Step 2.
Add references
Step 3.
Copy the code
Step 4.
Refresh browser
Copy the downloaded JS and CSS folder into your project

Extract the downloaded zip (download again) and grab the two folders. Make sure to place it where it can be reached from your html file.

Alternatively you can run the example using our demo app.

file-copy-arrows

Or you can just simply try and play with the examples right from the folder you just unpacked. You don't find the downloaded example? Download it again.

Include the mobiscroll CSS and JS resources in your files

Add this script before the closing </head> tag of your file. Make sure to have jQuery loaded before this. 

Copy code <link href="css/mobiscroll.jquery.min.css" rel="stylesheet" />
<script src="js/mobiscroll.jquery.min.js"></script>

Make sure to have the CSS and JS files copied over as explained in Step 1.

Copy the code into your app

Grab the relevant parts and drop them into your JS, HTML and CSS files.

Copy JS
Copy HTML
Copy CSS
Take a look at what you've accomplished

Reload your application in your favorite browser

arrow-browser-reload@2x

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

Keep things running smoothly

We have sent an email with verification instructions to you. Please make sure to follow the steps and verify it's you.

In case you fail to verify the account, the trial will be interrupted.

If you have any trouble

Don't hesitate to let us know.

install-help-bck
Simple two minute install guide for Javascript
Step 1.
Copy resources
Step 2.
Add references
Step 3.
Copy the code
Step 4.
Refresh browser
Copy the downloaded JS and CSS folders into your project

Extract the downloaded zip (download again) and grab the two folders. Make sure to place it where it can be reached from your html file.

Alternatively you can run the example using our demo app.

file-copy-arrows

Or you can just simply try and play with the examples right from the folder you just unpacked. You don't find the downloaded example? Download it again.

Include the mobiscroll CSS and JS resources in your files

Add this script before the closing </head> tag of your file 

Copy code <link href="css/mobiscroll.javascript.min.css" rel="stylesheet" />
<script src="js/mobiscroll.javascript.min.js"></script>

Make sure to have the CSS and JS files copied over as explained in Step 1.

Copy the code into your app

Grab the relevant parts and drop them into your JS, HTML and CSS files.

Copy JS
Copy HTML
Copy CSS
Take a look at what you've accomplished

Reload your application in your favorite browser

arrow-browser-reload@2x

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

Keep things running smoothly

We have sent an email with verification instructions to you. Please make sure to follow the steps and verify it's you.

In case you fail to verify the account, the trial will be interrupted.

If you have any trouble

Don't hesitate to let us know.

install-help-bck
Simple two minute install guide
Step 1.
Install the CLI
Step 2.
Install Mobiscroll
Step 3.
Copy the code
Step 4.
Run the app
Install the Mobiscroll CLI from npm

You will be able to configure Mobiscroll with ease in your app with the CLI

Copy command $ npm install -g @mobiscroll/cli
Install Mobiscroll in your React project

Run the following command in the root folder of your React project.

Don't have a project? Try it with our demo app.

Copy command $ mobiscroll config react

You will be prompted to log in with your mobiscroll account. Set your password here.

Working behind a proxy?

If you're working behind a proxy server, additional configuration might be needed. Please check the proxy configuration options in the documentation.

Using a CI/CD workflow?

The package will be installed from a private npm registry, which requires authentication. If your project uses a CI/CD workflow, read this guide on how to make it work.

Copy the code into your app

Grab the relevant parts and drop them into your JSX and CSS files.

Copy JSX
Copy TSX
Copy CSS
Take a look at what you've accomplished

Run $ npm start in the root folder of your app

Copy command $ npm start

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

Keep things running smoothly

We have sent an email with verification instructions to you. Please make sure to follow the steps and verify it's you.

In case you fail to verify the account, the trial will be interrupted.

If you have any trouble

Don't hesitate to let us know.

install-help-bck
Simple two minute install guide
Step 1.
Install the CLI
Step 2.
Install Mobiscroll
Step 3.
Copy the code
Step 4.
Run the app
Install the Mobiscroll CLI from npm

You will be able to configure Mobiscroll with ease in your app with the CLI

Copy command $ npm install -g @mobiscroll/cli
Install Mobiscroll in your React project

Run the following command in the root folder of your React project.

Don't have a project? Try it with our demo app.

Copy command $ mobiscroll config ionic

You will be prompted to log in with your mobiscroll account. Set your password here.

Working behind a proxy?

If you're working behind a proxy server, additional configuration might be needed. Please check the proxy configuration options in the documentation.

Using a CI/CD workflow?

The package will be installed from a private npm registry, which requires authentication. If your project uses a CI/CD workflow, read this guide on how to make it work.

Copy the code into your app

Grab the relevant parts and drop them into your TSX and CSS files.

Copy TSX
Copy CSS
Take a look at what you've accomplished

Run $ ionic serve in the root folder of your app

Copy command $ ionic serve

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

Keep things running smoothly

We have sent an email with verification instructions to you. Please make sure to follow the steps and verify it's you.

In case you fail to verify the account, the trial will be interrupted.

If you have any trouble

Don't hesitate to let us know.

install-help-bck
Simple two minute install guide
Step 1.
Install the CLI
Step 2.
Install Mobiscroll
Step 3.
Copy the code
Step 4.
Run the app
Install the Mobiscroll CLI from npm

You will be able to configure Mobiscroll with ease in your app with the CLI

Copy command $ npm install -g @mobiscroll/cli
Install Mobiscroll in your Angular project

Run the following command in the root folder of your Angular project.

Don't have a project? Try it with our demo app.

Copy command $ mobiscroll config angular

You will be prompted to log in with your mobiscroll account. Set your password here.

Working behind a proxy?

If you're working behind a proxy server, additional configuration might be needed. Please check the proxy configuration options in the documentation.

Using a CI/CD workflow?

The package will be installed from a private npm registry, which requires authentication. If your project uses a CI/CD workflow, read this guide on how to make it work.

Copy the code into your app

Grab the relevant parts and drop them into your Component and Template files. Copy the necessary imports into the Module file of your component. For quick testing copy the css to into your project's style.css or style.scss.

Copy TS
Copy HTML
Copy Module
Copy CSS
Take a look at what you've accomplished

Run $ ng serve in the root folder of your app

Copy command $ ng serve

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

Keep things running smoothly

We have sent an email with verification instructions to you. Please make sure to follow the steps and verify it's you.

In case you fail to verify the account, the trial will be interrupted.

If you have any trouble

Don't hesitate to let us know.

install-help-bck
Simple two minute install guide
Step 1.
Install the CLI
Step 2.
Install Mobiscroll
Step 3.
Copy the code
Step 4.
Run the app
Install the Mobiscroll CLI from npm

You will be able to configure Mobiscroll with ease in your app with the CLI

Copy command $ npm install -g @mobiscroll/cli
Install Mobiscroll in your Angular project

Run the following command in the root folder of your Angular project.

Don't have a project? Try it with our demo app.

Copy command $ mobiscroll config ionic

You will be prompted to log in with your mobiscroll account. Set your password here.

Working behind a proxy?

If you're working behind a proxy server, additional configuration might be needed. Please check the proxy configuration options in the documentation.

Using a CI/CD workflow?

The package will be installed from a private npm registry, which requires authentication. If your project uses a CI/CD workflow, read this guide on how to make it work.

Copy the code into your app

Grab the relevant parts and drop them into your Component and Template files. Copy the necessary imports into the Module file of your component. For quick testing copy the css to into your project's global.scss file.

Copy TS
Copy HTML
Copy Module
Copy CSS
Take a look at what you've accomplished

Run $ ionic serve in the root folder of your app

Copy command $ ionic serve

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

Keep things running smoothly

We have sent an email with verification instructions to you. Please make sure to follow the steps and verify it's you.

In case you fail to verify the account, the trial will be interrupted.

If you have any trouble

Don't hesitate to let us know.

install-help-bck
Simple two minute install guide
Step 1.
Install the CLI
Step 2.
Install Mobiscroll
Step 3.
Copy the code
Step 4.
Run the app
Install the Mobiscroll CLI from npm

You will be able to configure Mobiscroll with ease in your app with the CLI

Copy command $ npm install -g @mobiscroll/cli
Install Mobiscroll in your Vue project

Run the following command in the root folder of your Vue project.

Don't have a project? Try it with our demo app.

Copy command $ mobiscroll config vue

You will be prompted to log in with your mobiscroll account. Set your password here.

Working behind a proxy?

If you're working behind a proxy server, additional configuration might be needed. Please check the proxy configuration options in the documentation.

Using a CI/CD workflow?

The package will be installed from a private npm registry, which requires authentication. If your project uses a CI/CD workflow, read this guide on how to make it work.

Copy the code into your app

Grab the relevant parts and drop them into your Vue page.

Copy
Copy
Take a look at what you've accomplished

Run $ npm run dev in the root folder of your app

Copy command $ npm run dev

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

Keep things running smoothly

We have sent an email with verification instructions to you. Please make sure to follow the steps and verify it's you.

In case you fail to verify the account, the trial will be interrupted.

If you have any trouble

Don't hesitate to let us know.

install-help-bck
Simple two minute install guide
Step 1.
Install the CLI
Step 2.
Install Mobiscroll
Step 3.
Copy the code
Step 4.
Run the app
Install the Mobiscroll CLI from npm

You will be able to configure Mobiscroll with ease in your app with the CLI

Copy command $ npm install -g @mobiscroll/cli
Install Mobiscroll in your Ionic Vue project

Run the following command in the root folder of your Ionic Vue project.

Don't have a project? Try it with our demo app.

Copy command $ mobiscroll config ionic

You will be prompted to log in with your mobiscroll account. Set your password here.

Working behind a proxy?

If you're working behind a proxy server, additional configuration might be needed. Please check the proxy configuration options in the documentation.

Using a CI/CD workflow?

The package will be installed from a private npm registry, which requires authentication. If your project uses a CI/CD workflow, read this guide on how to make it work.

Copy the code into your app

Grab the relevant parts and drop them into your Vue page.

Copy
Take a look at what you've accomplished

Run $ npm run dev in the root folder of your app

Copy command $ npm run dev

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

Keep things running smoothly

We have sent an email with verification instructions to you. Please make sure to follow the steps and verify it's you.

In case you fail to verify the account, the trial will be interrupted.

If you have any trouble

Don't hesitate to let us know.

install-help-bck
Customize & try this demo locally
Sign in or start your free trial

We have to set you up with a trial for this to run 👍

Demos
Theme Select
Material
Material Dark
iOS
iOS Dark
Windows
Windows Dark
Language Locale
See other demos and change options
Theme
Locale
See other demos