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.
Shipping with useful features:
Single or multiple value selection
Group header and list segmentation
On demand rendering for long lists
Built in support for invalids and un-selectable values
Use the select for both mobile and desktop or set it up responsively. The main difference between the two rendering modes - controlled by the touchUi setting - is how the component is laid out.
When set to false the component shows up suitable for larger screens and pointer interaction while setting it to true renders it suitable for touch screens.
Different display modes can be used for mobile and desktop.
On mobile, the select can be rendered at the top or bottom of the screen, in the center of the screen,
anchored to an input or any object for that matter and it can also be embedded in any inline content.
Use the available display modes on mobile and desktop. On larger screens you have slightly different rendering options suitable for the large form-factor and pointer interaction.
Use the top, bottom and center modes for getting it in front of the users or stay in context and anchor it to the input.
Use the select dropdown responsively. You can set positioning and rendering based on the screen size.
Having a bottom positioned select on mobile, a popover anchored to the input on tablet and desktop display on large sceens is simple.
All this can be configured under the responsive setting where you pass the options for each breakpoint.