Language: ENCN

Smart Select Vue Component

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.

Usage example

<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>

Properties

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