Smart Select - 图1

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 and components with Framework7’s Smart Select component.

Smart Select Properties

PropTypeDefaultDescription
<ListItem> properties
smartSelectbooleanEnables Smart Select behavior
smartSelectParamsobjectObject with Smart Select Parameters

Access To Smart Select Instance

You can access Smart Select initialized instance by accessing .f7SmartSelect property of <ListItem> component.

Examples

  1. <List>
  2. <ListItem
  3. title="Fruit"
  4. smartSelect
  5. >
  6. <select name="fruits" defaultValue="apple">
  7. <option value="apple">Apple</option>
  8. <option value="pineapple">Pineapple</option>
  9. <option value="pear">Pear</option>
  10. <option value="orange">Orange</option>
  11. <option value="melon">Melon</option>
  12. <option value="peach">Peach</option>
  13. <option value="banana">Banana</option>
  14. </select>
  15. </ListItem>
  16. <ListItem
  17. title="Car"
  18. smartSelect
  19. smartSelectParams={{openIn: 'popup', searchbar: true, searchbarPlaceholder: 'Search car'}}
  20. >
  21. <select name="car" multiple defaultValue={['honda', 'audi', 'ford']}>
  22. <optgroup label="Japanese">
  23. <option value="honda">Honda</option>
  24. <option value="lexus">Lexus</option>
  25. <option value="mazda">Mazda</option>
  26. <option value="nissan">Nissan</option>
  27. <option value="toyota">Toyota</option>
  28. </optgroup>
  29. <optgroup label="German">
  30. <option value="audi">Audi</option>
  31. <option value="bmw">BMW</option>
  32. <option value="mercedes">Mercedes</option>
  33. <option value="vw">Volkswagen</option>
  34. <option value="volvo">Volvo</option>
  35. </optgroup>
  36. <optgroup label="American">
  37. <option value="cadillac">Cadillac</option>
  38. <option value="chrysler">Chrysler</option>
  39. <option value="dodge">Dodge</option>
  40. <option value="ford">Ford</option>
  41. </optgroup>
  42. </select>
  43. </ListItem>
  44. <ListItem
  45. title="Mac or Windows"
  46. smartSelect
  47. smartSelectParams={{openIn: 'sheet'}}
  48. >
  49. <select name="mac-windows" defaultValue="mac">
  50. <option value="mac">Mac</option>
  51. <option value="windows">Windows</option>
  52. </select>
  53. </ListItem>
  54. <ListItem
  55. title="Super Hero"
  56. smartSelect
  57. smartSelectParams={{openIn: 'popover'}}
  58. >
  59. <select name="superhero" multiple defaultValue={['Batman']}>
  60. <option value="Batman">Batman</option>
  61. <option value="Superman">Superman</option>
  62. <option value="Hulk">Hulk</option>
  63. <option value="Spiderman">Spiderman</option>
  64. <option value="Ironman">Ironman</option>
  65. <option value="Thor">Thor</option>
  66. <option value="Wonder Woman">Wonder Woman</option>
  67. </select>
  68. </ListItem>
  69. </List>

← Skeleton

Sortable →