Smart Select Svelte 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 Svelte component, but just a particular case of using <List> and <ListItem> components with Framework7's Smart Select component.

Smart Select Properties

Prop	Type	Description
<ListItem> properties
smartSelect	boolean	Enables Smart Select behavior
smartSelectParams	object	Object with Smart Select Parameters

Access To Smart Select Instance

You can access Smart Select initialized instance by calling .smartSelectInstance method of <ListItem> component.

<ListItem smartSelect bind:this={component} ... />

<script>
  //
  let component;

  // to get instance in some method
  const smartSelectInstance = component.smartSelectInstance();
</script>

Examples

smart-select.svelte

<script>
  import { Navbar, Page, List, Block, ListItem } from 'framework7-svelte';
</script>

<Page>
  <Navbar title="Smart Select" />
  <Block>
    Framework7 allows you to easily convert your usual form selects to dynamic pages with radios:
  </Block>
  <List strongIos outlineIos dividersIos>
    <ListItem title="Fruit" smartSelect>
      <select name="fruits" value="apple">
        <option value="apple">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>
    </ListItem>
    <ListItem
      title="Car"
      smartSelect
      smartSelectParams={{ openIn: 'popup', searchbar: true, searchbarPlaceholder: 'Search car' }}
    >
      <select name="car" multiple value={['honda', 'audi', 'ford']}>
        <optgroup label="Japanese">
          <option value="honda">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">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">Ford</option>
        </optgroup>
      </select>
    </ListItem>
    <ListItem title="Mac or Windows" smartSelect smartSelectParams={{ openIn: 'sheet' }}>
      <select name="mac-windows" value="mac">
        <option value="mac">Mac</option>
        <option value="windows">Windows</option>
      </select>
    </ListItem>
    <ListItem title="Super Hero" smartSelect smartSelectParams={{ openIn: 'popover' }}>
      <select name="superhero" multiple value={['Batman']}>
        <option value="Batman">Batman</option>
        <option value="Superman">Superman</option>
        <option value="Hulk">Hulk</option>
        <option value="Spiderman">Spiderman</option>
        <option value="Ironman">Ironman</option>
        <option value="Thor">Thor</option>
        <option value="Wonder Woman">Wonder Woman</option>
      </select>
    </ListItem>
  </List>
</Page>

← Skeleton

Sortable →

Improve this Doc

On this page

Smart Select Properties
Access To Smart Select Instance
Examples