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.

Use it on any custom input or with Mobiscroll form fields. The select is shown on input focus, but it can also be triggered on a button click or it can be embedded directly into the page.

Let’s say you already have a form and you want a custom dropdown. You can use it on existing fields or new fields.

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 it on mobile and desktop for listing different options with multiple select. It can be tied to an input or rendered inline (you can learn about the different display modes for mobile and desktop).

This is an alternative to the checkbox list. You can use it in combination with group options and a group wheel that comes in handy for segmenting long lists.

It works great for category filtering in ecommerce solutions.

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:

• Inline HTML, embedded in the markup - This is good if you only have a couple of static options.
• With the data setting - If you want to load model data, this is the way to do it.
• Remote data - Load it through the data setting from a remote api/data source.

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.

To make the country picker perform well with a great UX you can simply enable autocomplete for a search functionality or order and group the countries alphabetically.

In these examples the data is loaded from a remote JSON in the following format: { “value”: “FJ”, “group”: “F”, “text”: “Fiji” } however you can add it all to your page.

The look and feel of the select can be deeply customized. There are four levels of customization:

• Base themes: Choose between Mobiscroll, iOS, Android 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 CSS: If you need further customization, the sky is the limit with CSS overrides.

You can also see how every example looks by changing the theme from the header.