Smart Select allows you to easily convert your usual form selects to dynamic pages with grouped radio inputs. You can see such feature in many native apps.
Smart Select is not a separate component, but just a particular case of using <f7-list> and <f7-list-item> components.
<f7-list form>
<!-- Enables Smart Select behavior by adding "smart-select" prop -->
<f7-list-item smart-select title="Fruit">
<!-- Select with values inside -->
<select name="fruits">
<option value="apple" selected>Apple</option>
<option value="pineapple">Pineapple</option>
<option value="pear">Pear</option>
<option value="orange">Orange</option>
<option value="melon">Melon</option>
<option value="peach">Peach</option>
<option value="banana">Banana</option>
</select>
</f7-list-item>
<!-- Multiple Smart Select With Searchbar -->
<f7-list-item smart-select smart-select-searchbar title="Car">
<select name="car" multiple="multiple">
<optgroup label="Japanese">
<option value="honda" selected>Honda</option>
<option value="lexus">Lexus</option>
<option value="mazda">Mazda</option>
<option value="nissan">Nissan</option>
<option value="toyota">Toyota</option>
</optgroup>
<optgroup label="German">
<option value="audi" selected>Audi</option>
<option value="bmw">BMW</option>
<option value="mercedes">Mercedes</option>
<option value="vw">Volkswagen</option>
<option value="volvo">Volvo</option>
</optgroup>
<optgroup label="American">
<option value="cadillac">Cadillac</option>
<option value="chrysler">Chrysler</option>
<option value="dodge">Dodge</option>
<option value="ford" selected>Ford</option>
</optgroup>
</select>
</f7-list-item>
<!-- With back on select -->
<f7-list-item smart-select smart-select-back-on-select title="Mac or Windows">
<select name="mac-windows">
<option value="mac">Mac</option>
<option value="windows">Windows</option>
</select>
</f7-list-item>
</f7-list>| Prop | Type | Default | Description |
|---|---|---|---|
| <f7-list-item>'s Smart Select specific properties | |||
| smart-select | boolean | Converts list item to smart select list item | |
| smart-select-searchbar | boolean | Enables search bar for smart select page | |
| smart-select-searchnar-placeholder | string | "Search" | Smart select search bar search field placeholder text |
| smart-select-searchbar-cancel | string | "Cancel" | Smart select search bar Cancel button text |
| smart-select-page-title | string | Smart select page title. Defaults to title prop |
|
| smart-select-back-text | boolean | "Back" | Smart select page back-link text. |
| smart-select-back-on-select | boolean | Will close Smart Select page automatically after user selects any option | |
| smart-select-open-in | string | "page" | Defines how to open smart select: "page", "popup" or "picker" |
| smart-select-virtual-list | boolean | Enables Virtual list for smart select | |
| smart-select-virtual-list-height | number | Allows to specify virtual list item height | |
| smart-select-navbar-theme | string | Smart select navbar color theme. One of default colors | |
| smart-select-form-theme | string | Smart select form color theme. One of default colors | |