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.

Smart Select is not a separate component, but just a particular case of using <List> and <ListItem> components.

Usage example

<List form>
  <!-- Enables Smart Select behavior by adding "smart-select" prop -->
  <ListItem smartSelect title="Fruit">
    <!-- Select with values inside. Note how defaultValues are set in React on the actual select element as opposed to setting 'selected' on the option tag. -->
    <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>
  <!-- Multiple Smart Select With Searchbar -->
  <ListItem smartSelect smartSelectSearchbar title="Car">
    <select name="car" multiple="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>
  <!-- With back on select -->
  <ListItem smartSelect smartSelectBackOnSelect title="Mac or Windows">
    <select name="mac-windows">
      <option value="mac">Mac</option>
      <option value="windows">Windows</option>
    </select>
  </ListItem>
</List>

Properties

Prop	Type	Default	Description
<ListItem>'s Smart Select specific properties
smartSelect	boolean		Converts list item to smart select list item
smartSelectSearchbar	boolean		Enables search bar for smart select page
smartSelectSearchbarPlaceholder	string	"Search"	Smart select search bar search field placeholder text
smartSelectSearchbarCancel	string	"Cancel"	Smart select search bar Cancel button text
smartSelectPageTitle	string		Smart select page title. Defaults to title prop
smartSelectBackText	boolean	"Back"	Smart select page back-link text.
smartSelectBackOnSelect	boolean		Will close Smart Select page automatically after user selects any option
smartSelectOpenIn	string	"page"	Defines how to open smart select: "page", "popup" or "picker"
smartSelectVirtualList	boolean		Enables Virtual list for smart select
smartSelectVirtualListHeight	number		Allows to specify virtual list item height
smartSelectNavbarTheme	string		Smart select navbar color theme. One of default colors
smartSelectFormTheme	string		Smart select form color theme. One of default colors