Javascript Forms Segmented Example - Mobiscroll

Có thể bạn quan tâm

Updated on Dec 09, 2025 Advanced Javascript forms

Available for

Javascript jQuery Angular React Vue View Demos

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 Preview

Browse the various components and demos V5 Mobiscroll 5 Mobiscroll 4 Close Event calendar Primary views Calendar view Scheduler view Timeline view Agenda view Highlights CRUD operations Templating Event recurrence Working with resources Drag & drop Google & Outlook integration Timezone support Print support Common use cases Work calendar Workorder scheduling Employee shift planning Restaurant shift management Event listing Events with custom tooltips Meal planner Date & Time pickers Primary components Calendar Date & Time Range Time grid Highlights Week-Month-Quarter-Year views Single & multiple date selection Marked, colored days & labels Validation & restricting selection Localization Timezone support Common use cases Add/edit event screens Date filtering with presets Flight booking Vacation property availability Appointment booking Activity calendar Pickers & dropdowns Primary components Select Highlights Mobile & desktop optimized Single & multiple selection Templating Group options Built-in filtering Common use cases Country dropdown Advanced add/edit event forms Image & text picker Popup Primary components Popup Highlights Configure buttons Responsive behavior Theming Common use cases Custom range picking popover Event creation popup Opening a popup on hover Form components Primary components Forms Alerts & notifications Buttons Segmented Inputs & fields Toggle & radio Highlights Underline, box & outline inputs Stacked, inline & floating labels Responsive grid layout Theming Common use cases Responsive forms In-header filtering with segmented Advanced add/edit event forms Date & Time pickers Calendar v5 v4 Date & Time v5 v4 Range v5 v4 Timespan v4 Event calendar Agenda v5 Calendar view v5 v4 Scheduler v5 Timeline v5 Page layout & navigation Grid layout v4 v5 demos coming soon Navigation v4 Popup v5 v4 Styling v4 v5 demos coming soon Pickers & dropdowns Color v4 Option list v4 Scroller v4 Select v5 v4 Treelist v4 Numeric pickers Measurement v4 Number v4 Numpad v4 Form components Collapsible v4 Forms v5 v4 Slider & Progress v4 Timer v4 Gesture enabled responsive list Cards v4 Listview v4 Scrollview v4 FAQ What are the differences between v5 and v4 How to use v4 components along with v5 Form components Forms v5 Date & Time pickers Calendar Date & Time Range Event calendar Agenda Event calendar Scheduler Timeline Form components Forms Building forms Mobile form Inline desktop form Responsive form Inside a modal Alerts & notifications Alert, confirm & prompt Toast & snackbar Buttons Buttons Segmented Stepper Colors Inputs & fields Field types Customize the input Toggle & radio Checkbox Switch Radio buttons Customizing the look & feel Theming capabilities Page layout & navigation Popup Pickers & dropdowns Select Javascript Forms Forms for Javascript Forms for Javascript Download and try example Theme iOS Material Windows Auto

Change the theme setting here

Select the theme iOS Material Windows Auto-theme Usage theme: '' You can turn auto theming on and let it decide based on the platform Dark mode Off On Auto Select light or dark mode Light Dark Auto-theme-variant Usage themeVariant: '' You can turn auto dark mode on based on system settings Locale

Change the language and localization settings here

Select the locale English Arabic Bulgarian Català Cestina Chinese Croatian Dansk Deutsch English (GB) Español Français Greek Hindi Italiano Japanese Korean Lietuvių Magyar Nederlands Norsk Polski Português Eu. Pt. Brasileiro Română Serbian Slovencina Suomi Svenska Thai Türkçe Ukrainian Vietnamese Русский Русский (UA) עברית فارسی Usage locale: Selecting the locale loads the localized settings and translated UI microcopy Preview in fullscreen Forms - Mobile form Change demo Mobile form Download and try example View code on GitHub

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

JS
HTML

Copy code View code on GitHub Show more code Forms - Inline desktop form Change demo Inline desktop form Download and try example View code on GitHub

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

JS
HTML
CSS

Copy code View code on GitHub Show more code Forms - Responsive form Change demo Responsive form Download and try example View code on GitHub

Build in responsiveness into your javascript 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 375px 576px 768px 992px 1200px Forms - Inside a modal Change demo Inside a modal Download and try example View code on GitHub

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 Alert, confirm & prompt Download and try example View code on GitHub

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 Toast & snackbar Download and try example View code on GitHub

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 Buttons Download and try example View code on GitHub

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 Segmented Download and try example View code on GitHub

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 Stepper Download and try example View code on GitHub

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 Colors Download and try example View code on GitHub

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 Field types Download and try example View code on GitHub

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 Customize the input Download and try example View code on GitHub

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 Checkbox Download and try example View code on GitHub

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

Forms - Switch Change demo Switch Download and try example View code on GitHub

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

Forms - Radio buttons Change demo Radio buttons Download and try example View code on GitHub

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

Forms - Theming capabilities Change demo Theming capabilities Download and try example View code on GitHub

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.

Ask us anything

Angular Using Angular 4 or newer?
React Using React JS?
Vue Using Vue.js?
Javascript Using plain JS or no framework?
jQuery Using jQuery or jQuery Mobile?

Get started with Mobiscroll for Angular