87
Framework7 Smart Select
Framework7 Smart Select is used as an easy of changing form selects to dynamic pages. It uses a group of checkboxes and radio inputs.
Smart select can be used in various types of forms:
| Index | Type | Description |
|---|---|---|
| 1) | Smart Select Layout | Smart select layout is used to define a list view inside the select element using smart-select class. |
| 2) | Smart Select with Search Bar | Smart select is used to search the elements by using search bar and enables it by setting the data-searchbar class to true. |
| 3) | Custom Page Title and Back Link Text | It facilitates you to set the custom page title and back link for smart select using data-page-title and data-back-text attributes. |
| 4) | Open in Popup | Smart select can be open as popup by using the data-open-in attribute to popup. |
| 5) | Open in Picker | You can display smart select as picker modal by setting the data-open-in attribute to picker. |
| 6) | Custom Icons, Colors and Images | You can define custom icon, color or image on the smart select by using the data-option-icon, data-option-color and data-option-image attributes respectively. |
| 7) | Multiple Select and Optgroup | Smart select facilitates you to use multiple select and group options by using the multiple and optgroup attributes. |
| 8) | Multiple Select and Maxlength | Smart select facilitates you to select limited number items by using the maxlength attribute. |
Smart Select layout Example
Smart Select Search Bar Example
Custom Page Title and Back Link Text Example
Open in Popup Example
Open in Picker Example
Custom icons, colors and images Example
Multiple Select and Optgroup Example
Multiple Select and Maxlength Example
It facilitates you to select limited number items by using the maxlength attribute.
In this example maxlength is 3. So you can choose maximum of 3 cars.
Next TopicFramework7 Form Elements