Use it in responsive webapps as a dropdown and scroller picker 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.
Can be used on mobiscroll form elements or on any input, select and field.
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 sceens.
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.