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.

It is not a separate Vue component, but just a particular case of using <f7-list> and <f7-list-item> components with Framework7's Smart Select component.

Smart Select Properties

Prop Type Default Description
<f7-list-item> properties
smart-select boolean Enables Smart Select behavior
smart-select-params object Object with Smart Select Parameters

Access To Smart Select Instance

You can access Smart Select initialized instance by accessing .f7SmartSelect property of <f7-list-item> component.


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

  <!-- Multiple Smart Select With Searchbar -->
  <f7-list-item smart-select :smart-select-params="{ searchbar: true }" 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 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 label="American">
        <option value="cadillac">Cadillac</option>
        <option value="chrysler">Chrysler</option>
        <option value="dodge">Dodge</option>
        <option value="ford" selected>Ford</option>

  <!-- With back on select -->
  <f7-list-item smart-select :smart-select-params="{ closeOnSelect: true }" title="Mac or Windows">
    <select name="mac-windows">
      <option value="mac">Mac</option>
      <option value="windows">Windows</option>