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.
Forms - Mobile form
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.
Forms - Inline 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 options for setting the theme, localization options and everything that should be consistent across your app.
Forms - Responsive form
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.
Forms - Inside a modal
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.
Forms - Alert, confirm & prompt
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
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 - Segmented
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.
Forms - Stepper
Use the stepper to enable controlled increasing and decreasing of values. Configure the steps and choose to provide an input for manual entry.
Forms - Field types
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
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
Use checkboxes for multiple choice lists or properties or true/false properties of an event. Different color presets are available.
Forms - Switch
Use the switch for turning options and setting fields on/off. Different color presets are available.
Forms - Theming capabilities
Forms can be themed and customized. There are four levels of customization:
- Base themes: Choose between
iOS,MaterialandWindows. - Light or dark: Every theme has a
lightanddarkvariant. Setting thethemeVariantto'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.