Customize starter project locally
Please sign in or start a free trial to try

To download starter project please or start a free trial.

You'll get everything referenced including the trial, ready for testing!

Mobiscroll for Ionic Fill the missing UI gaps and meet customer expectations

Ionic components with a unified look & feel for shipping great apps

Start your free 15 day trial • We'll help you get started in no time!

Make meaningful progress and set up for success

Fulfill requirements

Build the app your clients and customers need and want

Rise to the top of the app store

Get those five star app store reviews and enjoy engaged audiences

Deliver a great app

Make sure to impress with premium UI and amazing UX

The missing ionic components are finally here

Ionic Framework helps a lot in building cross-platform hybrid and progressive web apps, but for a polished
five star experience you'll be needing more than the basic set of UI elements.

You will find a selection of components that will help you deliver great apps and meet project requirements.

Responsive Calendar

Missing from Ionic

The only calendar you’ll be needing for your apps with responsive and fullscreen mode. An essential control that is missing from the basic Ionic arsenal.

  • Calendar view or wheel scroller picker
  • Use it for date-only selection or combine with time picker
  • Responsive & liquid layout
  • Single, multiple and week selection
  • Minimum and maximum values, invalids
Learn more about the Calendar

Advanced date & time picker

Limited in Ionic

A more advanced date and time picker control that the basic Ionic date-time. It perfectly resembles the native pickers and their performance. Apply specific business rules for the perfect fit.

  • Circular wheels
  • Date-only, time-only or mixed modes
  • Steps for displayed values
  • Hide wheels that don’t make sense
  • Min, max values, invalids
Learn more about the Date & Time

Range for date and time

Missing from Ionic

A goto solution for picking date and time ranges. Date-only, time-only or mixed date & time. You can use it with one or two inputs. There is no simple alternative for the Range in the ionic controls, other than manually implementing the validation logic and adding the necessary plumbing code.

  • Date, time or date & time range
  • Calendar view or scroll pickers
  • Span across one or two inputs
Learn more about the Range picker

Advanced select scroller

Limited in Ionic

A great alternative to the native dropdown or ionic select with support for single and multiple selection. Grouping, render on demand supported out of the box. With near pixel-perfect rendering to the native counterparts and great customization options, this is a great addition to the basic Ionic toolset.

  • Single or multiple value selection
  • Circular scrolling
  • Filtering and autocomplete with type ahead
  • Group header and list segmentation support
  • Rendering on demand for long lists
  • Built in support for invalids and unselectable values
Learn more about the Select

Lightweight event calendar

Missing from Ionic

Compact calendar view with multiple daily or recurring events. Display, short event description in the day cells or provide lengthier text in a popup. There is no built-in alternative to this in the basic Ionic control set.

  • Fullscreen view
  • Single or multi-day events
  • Daily event listing
Learn more about the Event calendar

Color picker control

Missing from Ionic

Customizable color picker control for single and multiple selection with refinement capabilities. There is no alternative to this control in the basic set of Ionic controls.

  • Single or multiple select
  • Refine luminosity
  • List any number of color presets
  • Multiple color select slots
Learn more about the Color picker

Image scroller

Missing from Ionic

Enhance selections with icons or images and help users make a better, more informed choice. This control is missing from the basic Ionic controls.

  • Use it with scalable font icons
  • Use it with images
  • Embed the control inline, right into the page
Learn more about the Image scroller

Measurement scroller & conversion engine

Missing from Ionic

Capture and convert force, speed, mass, temperature and distance. Scroller based picker with built-in conversion engine. There is no alternative to this control in the basic Ionic toolset.

  • Work with negative values
  • Convert between multiple units
  • Specify scroller steps for simplified validation
  • Easily write custom conversion rules
Learn more about the Measurement scroller

Number scroller

Missing from Ionic

Capture and work with integer and decimal numbers with this scroller control. There is no alternative available in the basic set of Ionic controls.

  • Work with negative numbers
  • Wheel steps supported
  • Implicit validation with min/max and invalids
Learn more about the Number scroller

Numeric keypad control

Missing from Ionic

Use this versatile numpad for a variety of tasks, including: number, date, time, currency, timespan and PIN entry. There is no alternative available in the basic Ionic toolset for this control.

  • Out of the box supported presets - date, time, timespan, number, decimal, masked entry
  • Suffixes and affixes supported
  • Create custom value templates and presets
Learn more about the Numpad

Rating and Grading scroller

Missing from Ionic

Provide a UI for rating items. Scroller controls with a tailored API for rating and grading. Works great as an alternative to inline rating. There is no built in option available in the basic Ionic set for this task.

  • Support multiple display modes
  • Configurable rating system
  • Use scalable font icons instead of stars
Learn more about the Rating scroller

Timer with countdown and stopwatch

Missing from Ionic

With built-in stopwatch and countdown functionality. Animated scroller for real-time feedback. There is no such control or alternative available in the basic Ionic toolset.

  • Stopwatch and countdown
  • UI controls for Start/Stop/Pause/Lap
  • Animated wheels
Learn more about the Timer

Timespan scroller

Missing from Ionic

Make scheduling and adding past recordings easy by letting users enter timespans of seconds, minutes, hours up to years. There is no built in control in the basic Ionic set shipping with such functionality.

  • Steps for limiting values the user can pick
  • Wheels for seconds, minutes, hours, days
  • Familiar scroller based UI
Learn more about the Timespan

Hierarchical treelist

Missing from Ionic

Help users pick from hierarchies in the same view. Think of it as multiple select scrollers without the need of switching context. There is no such control available in the basic Ionic set.

  • Variable depth
  • Circular wheels
  • Validation
Learn more about the Treelist

Live example with Ionic 3

This is a live example running in an actual Ionic 3 app. Use the drawer to try all the different components.
Play with the theme and language configuration.

Themes and languages

This is a live demo app that runs inside an Ionic 3 project. You can easily try different themes and language options from within the app.

Plug and play

Simply plug Mobiscroll into your existing Ionic app and create Mobiscroll component instances as you need them on various ionic elements like ion-inputs.

Try it in Ionic View - ID: 09372c58

Legacy Ionic View ID: 40E23455

Download the Ionic Kitchen Sink app

"Once we started using Mobiscroll, our conversions have improved and the experience became much more delightful!"

- Daniel Maldonado, Sr. Web Designer, Ecommission Financial Services

Read how our customers rate us

Installation and setup

Simply install it like any other Ionic plugin or component.
Use the Mobiscroll CLI and get the packages you need from NPM.

Step 1. Install Mobiscroll CLI.

$ npm install -g @mobiscroll/cli

Step 2. Configure Mobiscroll in your Ionic app.

$ mobiscroll config ionic

Simple usage

Once Mobiscroll is installed in your app, use the components and directives to initialize the UI elements.
It seamlessly integrates with your Ionic workflow.

<ion-content class="padding">
  <label class="item item-input">
    <span class="input-label">Date</span>
    <input type="text" ng-model="selectedDate" mobiscroll-date>
  </label>
</ion-content>

Use Mobiscroll for Angular in your Ionic app. Integration controls included out of the box.

<ion-content padding>
  <ion-item>
    <ion-label>Date</ion-label>
    <ion-input [(ngModel)]="selectedDate" mbsc-date ></ion-input>
  </ion-item>
</ion-content>

Use Mobiscroll for Angular 4 in your Ionic 2/3 app. Directives included.

30 Day
Money Back
Guarantee
Try it RISK-FREE. If you're not extremely satisfied with our product, you'll get a full refund within the first 30 days! No questions asked!

Compared to basic Ionic components

Let's take a look how Mobiscroll stacks up against the basic set of components that ship with Ionic and why it is great companion to it, or basic Ionic vs Mobiscroll.

Mobiscroll
Advanced components
Ionic
Basic component set
Responsive calendar
Color picker control
Lightweight event calendar
Image scroller
Measurement scroller & conversion engine
Number scroller
Numeric keypad control
Range for date and time
Rating & grading scroller
Generic scroller control
Timer with countdown and stopwatch
Timespan scroller
Hierarchical treelist
Date & time picker Advanced features Limited functionality
Select scroller Advanced features Limited functionality
You can integrate mobiscroll with the following ionic elements
Various form controls Available with slight differences
Scalable icons Available
Lists Available
Loading and progress indicatiors Available
Alerts and toast Available
Popovers and modals Available
Cards
Grid system
Menus and Navigation
Toolbar
Floating Action Button

Try it free for 15 Days

We'll support you through the whole process of getting up & running

Join great companies who takes their UI seriously

"We are using the Mobiscroll Calendar in one of our products.
Although it didn't come with the functionality we were looking for out of the box,
the support team went above and beyond to help me with the problem.

I was absolutely amazed by it and got so much more than I was expecting."

Tom Maddocks, Web Developer, Blueleaf

Easily add to existing projects or use it for brand new solutions

No problem if you have an existing project, you can easily plug Mobiscroll into your Ionic v1 and v2 apps. Think of it as powerups.

Some of the smartest companies rely on mobiscroll for their UI

With well thought out components and a lot of edge cases handled make your app feel and be top notch.

General features

All the features you need for a great integration

Icon Library

Build and save your custom icon sets with over 2500 icons to choose from

Cross-Platform UI

Deliver great cross-platform web and hybrid apps with adaptable themes

Accessibility

Support people with disabilities and right-to-left cultures with WAI-ARIA support, Section 508, and RTL rendering

Source Code

Integrate more tightly and add your own custom functionality to mobiscroll with downloadable source

Only in Complete license

Theme Builder

Customize the look and feel of the UI to match your brand and app

Localization

Support multi-lingual apps and serve UI with the correct culture settings

Responsive UI

Deliver great looking apps on multiple sized and shaped screens with adaptable and flexible controls

Modular builds

Fine tune your packages and choose to include only what you need. Save unnecessary weight from your resource files.

Simple Pricing

We offer two separate products. One for Ionic v1 and another for Ionic v2 and above, including Ionic v3.

Looking for other products and licensing options?
31 carefully crafted UI elements
For multiple projects and developers
Angular JS & Ionic controls
Angular 1.x and Ionic 1 supported
Royalty-free commercial usage
NPM and Mobiscroll CLI support
Fine-tune downloadable packages
Built-in support for extensive icon library
Customize themes for a perfect fit
1 year of free updates and support
30 day money back guarantee
$1805
$395 $395
30 Day
Money Back
Guarantee
Try it RISK-FREE. If you're not extremely satisfied with our product, you'll get a full refund within the first 30 days! No questions asked!
Need a more custom solution or additional functionality? Get in touch, we can help! Explore custom development services →
More than 100 live demos with downloadable source available for usage with Ionic Framework. Try and download demos →
Browse the extensive API documentation and see how to integrate, customize and tap into the Mobiscroll API for Ionic. Explore documentation & API reference →

Start Your Free Trial

We'll support you through the whole process of getting up & running

"We spend lots of time building web app forms to work with Mobiscroll, which is fantastic.

Your software makes ours perform great!"
Henson Yem, Senior Technology Consultant, Tang Computers
Thanks for downloading
Try and customize the app locally

Extract the zip file and run the project like any Ionic app. Make sure to have Ionic CLI installed and open the terminal in the app root folder.

Step 1. Run in root folder
$ npm install
Step 2. Start the app
$ ionic serve

Let us know if we can help and enjoy!