Use it in responsive webapps and Ionic React projects with desktop and mobile optimized look & feel
Advanced select component for single and multiple value selection. Provides a great alternative to the native dropdown with enhanced UX. Renders a scroller on touch and a dropdown on desktop.
Use it in custom event add/edit forms or on any input, field and form.
With the built-in filtering and templating capabilities create custom pickers.
Use the select/combobox for both mobile and desktop or set it up responsively.
The main difference between the two rendering modes is how the picker is laid out. Set the touchUi option to false and the component shows up suitable for larger screens and pointer interaction while setting it to true renders it suitable for touch screens.
Use it on an existing form field, custom input, native select or use it on Mobiscroll form fields. You can also embed it directly into your page.
When linked to an input, the component will be shown on focus or when someone clicks on the field. Alternatively, you can leave the input editable and show the component only on a button click.
The select has a liquid layout, which means it nicely adapts to its surroundings. There are times however when you would like to set up the component responsively.
Use the responsive option to configure the picker and change the options based on the viewport width. There are five predefined breakpoints:
xsmall - min-width: 0px
small - min-width: 576px
medium - min-width: 768px
large - min-width: 992px
xlarge - min-width: 1200px
use custom for setting a custom breakpoint
It is a good idea to change the display or controls option to tailor the UX. This way you can have a bottom positioned calendar on mobile, a popover anchored to the input on tablet and desktop display on large screens.
The select/combobox has five built-in display modes that can be controlled through the display option:
top - modal that slides down from the top
bottom - modal that slides up from the bottom
center - modal that shows up in the middle with a pop animation
anchored - modal that shows up anchored to an input or any dom element
inline - embeddable picker that is rendered into the markup without its own modal
Use the touchUi option to switch between touch optimized mobile rendering and pointer optimized desktop rendering. It can be dynamically switched with the help of the responsive option.
The defaults change on a theme to theme basis. The ios theme comes with bottom on mobile and anchored on desktop while the material and windows themes have center on mobile and anchored on desktop.
The select component takes care of rendering data in a scrollable and consumable way for the user. The date can be passed a couple of different ways:
With the data option - If you want to load model data this is the way to do it. This is the way to populate the select if you want to create a custom item template.
Remote data - Load it through the data option from a remote api/data source.
By default the select takes the item.text and item.value of the data array items and populates the select. Besides the basic text/value interpretation you can write custom render functions for any custom markup printed as a scrollable list.
With the help of the renderItem option you can write a function that returns the custom item markup. Any data field can be used for the template. You'll also want to make sure that the itemHeight is set accordingly.
Use the select component as a country picker on mobile and desktop. You can add the dropdown to any input or use Mobiscroll input fields. If you don’t want to make it a dropdown, you can embed the picker inline right into a page.
In this example the data is loaded from a remote JSON in the following format: { “value”: “FJ”, “group”: “F”, “text”: “Fiji” } and the flags are loaded from our server. For your implementation you should embed the list and flags into your own page.
An image & text value picker can be easily implemented by building a custom item template. Pass the items with its base properties, like text and value and all the custom properties needed to the data array.
Sometimes, the items of the select can get very long and they won't fit a single line. For those cases you can use the custom item templating and itemHeight to solve the rendering problems.
Use it on mobile and desktop for listing different options with multiple select. It can be tied to an input, native select or rendered inline. Turn it on by setting selectMultiple to true.
As an alternative to the checkbox list it works great for category filtering... eg. e-commerce solutions.
Enable filtering by setting the filter option to true. Filtering happens on the client side by default, however remote filtering can be implemented using the onFilter event.
Multiple selects can be linked together as a hierarchy. A region > division > subdivision is a great example of such a hierarchy where each level is dynamically populated based on the selection of the previous level.
Values can change in a couple of different ways: through defaults, interacting with the UI or programmatically. The select defaults to null (nothing is selected), which can be easily overridden with the defaultSelection option.
The values are set by interacting with the component and making a selection or it can be done programmatically.
Use the buttons option for showing/hiding set, cancel or add custom buttons.
Enforcing validation is essential to a great UX. You can set an option to invalid through the disabled property:
data: [
...
{
text: 'Chicago',
value: 'chi',
disabled: true
}]
Having invalids set up correctly not just enhances the UX, but improves performance.
The select ships with different event hooks for deep customization. Events are triggered through the lifecycle of the component where you can tie in custom functionality and code.
While users interact with the UI events like
onChange, onSet, onInit
... will be triggered.
All components are fully localized. In case of the select this covers button copy, rtl and more.
You can see how each example shows up by clicking on the small flag icon or checking the examples below.
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.
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.
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.
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.
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
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.
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.
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.