Get Started
React Components
- App
- Accordion
- Action Sheet / Actions
- Badge
- Block / Content Block
- Button
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Floating Action Button / FAB
- Gauge
- Grid / Layout Grid
- Icon
- Inputs / Form Inputs
- Link
- List View
- List Item
- List Button
- List Index
- Login Screen
- Messagebar
- Messages
- Navbar
- Page
- Panel / Side Panels
- Photo Browser
- Popover
- Popup
- Preloader
- Progressbar
- Radio
- Range Slider
- Searchbar
- Sheet Modal
- Smart Select
- Sortable
- Statusbar
- Stepper
- Subnavbar
- Swiper
- Swipeout
- Tabs
- Toggle
- Toolbar / Tabbar
- View
- Virtual List

Smart Select React 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 React 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 accessing .f7SmartSelect property of <ListItem> component.

Examples

<List>

  <ListItem
    title="Fruit"
    smartSelect
  >
    <select name="fruits" defaultValue="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 defaultValue={['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" defaultValue="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 defaultValue={['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>